@measured/puck 0.14.2-canary.e6e01c6 → 0.14.3-canary.73b83ef

package/README.md

@@ -108,7 +108,7 @@ Available recipes include:
 
 Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
 
-If you need support integrating Puck or creating a beautiful component library, please reach out via [our website](https://measured.co).
+If you need support integrating Puck or creating a beautiful component library, please reach out via the [Measured](https://measured.co) website.
 
 ## License
 

package/dist/index.css

@@ -135,9 +135,6 @@
 }
 
 /* styles.css */
-.Puck {
-  min-height: 100%;
-}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
 ._Button_1t64k_1 {

package/dist/index.d.ts

@@ -229,7 +229,7 @@ type IframeConfig = {
     enabled?: boolean;
 };
 
-declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, }: {
+declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, dnd, }: {
     children?: ReactNode;
     config: UserConfig;
     data: Data;
@@ -251,6 +251,9 @@ declare function Puck<UserConfig extends Config = Config>({ children, config, da
     headerPath?: string;
     viewports?: Viewports;
     iframe?: IframeConfig;
+    dnd?: {
+        disableAutoScroll?: boolean;
+    };
 }): react_jsx_runtime.JSX.Element;
 declare namespace Puck {
     var Components: () => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -8033,9 +8033,9 @@ var require_react_dom_development = __commonJS({
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
         }
-        var React2 = require("react");
+        var React3 = require("react");
         var Scheduler = require_scheduler();
-        var ReactSharedInternals = React2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React3.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         var suppressWarning = false;
         function setSuppressWarning(newSuppressWarning) {
           {
@@ -8084,7 +8084,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment17 = 7;
+        var Fragment18 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -9240,7 +9240,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment17:
+            case Fragment18:
               return "Fragment";
             case HostComponent:
               return type;
@@ -9640,7 +9640,7 @@ var require_react_dom_development = __commonJS({
           {
             if (props.value == null) {
               if (typeof props.children === "object" && props.children !== null) {
-                React2.Children.forEach(props.children, function(child) {
+                React3.Children.forEach(props.children, function(child) {
                   if (child == null) {
                     return;
                   }
@@ -18087,7 +18087,7 @@ var require_react_dom_development = __commonJS({
           }
         }
         var fakeInternalInstance = {};
-        var emptyRefsObject = new React2.Component().refs;
+        var emptyRefsObject = new React3.Component().refs;
         var didWarnAboutStateAssignmentForComponent;
         var didWarnAboutUninitializedState;
         var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -18911,7 +18911,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment17) {
+            if (current2 === null || current2.tag !== Fragment18) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -19314,7 +19314,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment17) {
+                  if (child.tag === Fragment18) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -23489,7 +23489,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment17:
+            case Fragment18:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23762,7 +23762,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment17:
+            case Fragment18:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -28021,7 +28021,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment17, elements, key, mode);
+          var fiber = createFiber(Fragment18, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29311,6 +29311,7 @@ var defaultViewports = [
 ];
 
 // components/Puck/context.tsx
+var import_ua_parser_js = require("ua-parser-js");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultAppState = {
   data: { content: [], root: { props: { title: "" } } },
@@ -29350,7 +29351,8 @@ var defaultContext = {
   setZoomConfig: () => null,
   status: "LOADING",
   setStatus: () => null,
-  iframe: {}
+  iframe: {},
+  safariFallbackMode: false
 };
 var appContext = (0, import_react3.createContext)(defaultContext);
 var AppProvider = ({
@@ -29362,10 +29364,34 @@ var AppProvider = ({
   (0, import_react3.useEffect)(() => {
     setStatus("MOUNTED");
   }, []);
+  const [safariFallbackMode, setSafariFallbackMode] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    var _a, _b, _c;
+    const ua = new import_ua_parser_js.UAParser(navigator.userAgent);
+    const { browser } = ua.getResult();
+    if (browser.name === "Safari" && (((_a = browser.version) == null ? void 0 : _a.indexOf("17.2.")) || ((_b = browser.version) == null ? void 0 : _b.indexOf("17.3.")) || ((_c = browser.version) == null ? void 0 : _c.indexOf("17.4.")))) {
+      if (process.env.NODE_ENV !== "production" && value.iframe.enabled) {
+        console.warn(
+          `Detected Safari ${browser.version}, which contains a bug that prevents Puck DropZones from detecting a mouseover event within an iframe. This affects Safari versions 17.2, 17.3 and 17.4.
+
+Running in compatibility mode, which may have some DropZone side-effects. Alternatively, consider disabling iframes: https://puckeditor.com/docs/integrating-puck/viewports#opting-out-of-iframes.
+
+See https://github.com/measuredco/puck/issues/411 for more information. This message will not show in production.`
+        );
+      }
+      setSafariFallbackMode(true);
+    }
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     appContext.Provider,
     {
-      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status, setStatus }),
+      value: __spreadProps(__spreadValues({}, value), {
+        zoomConfig,
+        setZoomConfig,
+        status,
+        setStatus,
+        safariFallbackMode
+      }),
       children
     }
   );
@@ -30193,7 +30219,11 @@ function DropZoneEdit({ zone, allow, disallow, style }) {
   let isEnabled = userWillDrag;
   if (userIsDragging) {
     if (draggingNewComponent) {
-      isEnabled = hoveringOverArea;
+      if (appContext2.safariFallbackMode) {
+        isEnabled = true;
+      } else {
+        isEnabled = hoveringOverArea;
+      }
     } else {
       isEnabled = draggingOverArea && hoveringOverZone;
     }
@@ -30498,7 +30528,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // lib/use-placeholder-style.ts
 init_react_import();
@@ -31183,7 +31213,7 @@ var useResolvedData = (appState, config, dispatch) => {
   const [componentState, setComponentState] = (0, import_react13.useState)({});
   const deferredSetStates = {};
   const setComponentLoading = (0, import_react13.useCallback)(
-    (id, loading, defer = 0) => {
+    (id, loading, defer2 = 0) => {
       if (deferredSetStates[id]) {
         clearTimeout(deferredSetStates[id]);
         delete deferredSetStates[id];
@@ -31193,7 +31223,7 @@ var useResolvedData = (appState, config, dispatch) => {
           [id]: __spreadProps(__spreadValues({}, prev[id]), { loading })
         }));
         delete deferredSetStates[id];
-      }, defer);
+      }, defer2);
     },
     []
   );
@@ -32031,7 +32061,7 @@ var RadioField = ({
                   onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
-                defaultChecked: value === option.value
+                checked: value === option.value
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName14("radioInner"), children: option.label || option.value })
@@ -32073,7 +32103,7 @@ var SelectField = ({
           disabled: readOnly,
           onChange: (e) => {
             if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(Boolean(e.currentTarget.value));
+              onChange(JSON.parse(e.currentTarget.value));
               return;
             }
             onChange(e.currentTarget.value);
@@ -32597,19 +32627,218 @@ var Components = () => {
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-var import_react22 = require("react");
-var import_auto_frame_component = __toESM(require("@measured/auto-frame-component"));
+var import_react23 = require("react");
+
+// components/AutoFrame/index.tsx
+init_react_import();
+var import_react22 = __toESM(require("react"));
+var import_react_frame_component = __toESM(require("react-frame-component"));
+var import_object_hash = __toESM(require("object-hash"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var styleSelector = 'style, link[rel="stylesheet"]';
+var collectStyles = (doc) => {
+  const collected = [];
+  doc.head.querySelectorAll(styleSelector).forEach((style) => {
+    collected.push(style);
+  });
+  return collected;
+};
+var getStyleSheet = (el) => {
+  return Array.from(document.styleSheets).find((ss) => {
+    const ownerNode = ss.ownerNode;
+    return ownerNode.href === el.href;
+  });
+};
+var getStyles = (styleSheet) => {
+  if (styleSheet) {
+    try {
+      return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+    } catch (e) {
+      console.warn(
+        "Access to stylesheet %s is denied. Ignoring\u2026",
+        styleSheet.href
+      );
+    }
+  }
+  return "";
+};
+var defer = (fn) => setTimeout(fn, 0);
+var CopyHostStyles = ({
+  children,
+  debug = false,
+  onStylesLoaded = () => null
+}) => {
+  const { document: doc, window: win } = (0, import_react_frame_component.useFrame)();
+  (0, import_react22.useEffect)(() => {
+    if (!win || !doc) {
+      return () => {
+      };
+    }
+    let elements = [];
+    const hashes = {};
+    const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
+    const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
+      let mirror;
+      if (el.nodeName === "LINK" && inlineStyles) {
+        mirror = document.createElement("style");
+        mirror.type = "text/css";
+        let styleSheet = getStyleSheet(el);
+        if (!styleSheet) {
+          yield new Promise((resolve) => {
+            const fn = () => {
+              resolve();
+              el.removeEventListener("load", fn);
+            };
+            el.addEventListener("load", fn);
+          });
+          styleSheet = getStyleSheet(el);
+        }
+        const styles = getStyles(styleSheet);
+        if (!styles) {
+          if (debug) {
+            console.warn(
+              `Tried to load styles for link element, but couldn't find them. Skipping...`
+            );
+          }
+          return;
+        }
+        mirror.innerHTML = styles;
+        mirror.setAttribute("data-href", el.getAttribute("href"));
+      } else {
+        mirror = el.cloneNode(true);
+      }
+      return mirror;
+    });
+    const addEl = (el) => __async(void 0, null, function* () {
+      const index = lookupEl(el);
+      if (index > -1) {
+        if (debug)
+          console.log(
+            `Tried to add an element that was already mirrored. Updating instead...`
+          );
+        elements[index].mirror.innerText = el.innerText;
+        return;
+      }
+      const mirror = yield mirrorEl(el);
+      if (!mirror) {
+        return;
+      }
+      const elHash = (0, import_object_hash.default)(mirror.outerHTML);
+      if (hashes[elHash]) {
+        if (debug)
+          console.log(
+            `iframe already contains element that is being mirrored. Skipping...`
+          );
+        return;
+      }
+      hashes[elHash] = true;
+      doc.head.append(mirror);
+      elements.push({ original: el, mirror });
+      if (debug)
+        console.log(`Added style node ${el.outerHTML}`);
+    });
+    const removeEl = (el) => {
+      var _a, _b;
+      const index = lookupEl(el);
+      if (index === -1) {
+        if (debug)
+          console.log(
+            `Tried to remove an element that did not exist. Skipping...`
+          );
+        return;
+      }
+      const elHash = (0, import_object_hash.default)(el.outerHTML);
+      (_b = (_a = elements[index]) == null ? void 0 : _a.mirror) == null ? void 0 : _b.remove();
+      delete hashes[elHash];
+      if (debug)
+        console.log(`Removed style node ${el.outerHTML}`);
+    };
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+              const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+              if (el && el.matches(styleSelector)) {
+                defer(() => addEl(el));
+              }
+            }
+          });
+          mutation.removedNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE) {
+              const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+              if (el && el.matches(styleSelector)) {
+                defer(() => removeEl(el));
+              }
+            }
+          });
+        }
+      });
+    });
+    const parentDocument = win.parent.document;
+    const collectedStyles = collectStyles(parentDocument);
+    const hrefs = [];
+    let stylesLoaded = 0;
+    Promise.all(
+      collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
+        if (styleNode.nodeName === "LINK") {
+          const linkHref = styleNode.href;
+          if (hrefs.indexOf(linkHref) > -1) {
+            return;
+          }
+          hrefs.push(linkHref);
+        }
+        const mirror = yield mirrorEl(styleNode);
+        if (!mirror)
+          return;
+        elements.push({ original: styleNode, mirror });
+        return mirror;
+      }))
+    ).then((mirrorStyles) => {
+      const filtered = mirrorStyles.filter(
+        (el) => typeof el !== "undefined"
+      );
+      filtered.forEach((mirror) => {
+        mirror.onload = () => {
+          stylesLoaded = stylesLoaded + 1;
+          if (stylesLoaded >= elements.length) {
+            onStylesLoaded();
+          }
+        };
+      });
+      doc.head.innerHTML = "";
+      doc.head.append(...filtered);
+      observer.observe(parentDocument.head, { childList: true, subtree: true });
+      filtered.forEach((el) => {
+        const elHash = (0, import_object_hash.default)(el.outerHTML);
+        hashes[elHash] = true;
+      });
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
+};
+var AutoFrameComponent = import_react22.default.forwardRef(
+  function(_a, ref) {
+    var _b = _a, { children, debug, onStylesLoaded } = _b, props = __objRest(_b, ["children", "debug", "onStylesLoaded"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_frame_component.default, __spreadProps(__spreadValues({}, props), { ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopyHostStyles, { debug, onStylesLoaded, children }) }));
+  }
+);
+AutoFrameComponent.displayName = "AutoFrameComponent";
+var AutoFrame_default = AutoFrameComponent;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
 var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
 
 // components/Puck/components/Preview/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("PuckPreview", styles_module_default16);
 var Preview = ({ id = "puck-preview" }) => {
   const { config, dispatch, state, setStatus, iframe } = useAppContext();
-  const Page = (0, import_react22.useCallback)(
+  const Page = (0, import_react23.useCallback)(
     (pageProps) => {
       var _a, _b;
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
@@ -32617,13 +32846,13 @@ var Preview = ({ id = "puck-preview" }) => {
       }, pageProps), {
         editMode: true,
         puck: { renderDropZone: DropZone }
-      })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
+      })) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
   const rootProps = state.data.root.props || state.data.root;
-  const ref = (0, import_react22.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const ref = (0, import_react23.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: getClassName21(),
@@ -32631,8 +32860,8 @@ var Preview = ({ id = "puck-preview" }) => {
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_auto_frame_component.default,
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        AutoFrame_default,
         {
           id: "preview-frame",
           className: getClassName21("frame"),
@@ -32641,9 +32870,9 @@ var Preview = ({ id = "puck-preview" }) => {
           onStylesLoaded: () => {
             setStatus("READY");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) }))
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId }) }))
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropZone, { zone: rootDroppableId }) })) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: "preview-frame", className: getClassName21("frame"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Page, __spreadProps(__spreadValues({ dispatch, state }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropZone, { zone: rootDroppableId }) })) })
     }
   );
 };
@@ -32691,7 +32920,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -32705,7 +32934,7 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 };
 
 // components/LayerTree/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default17);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
 var LayerTree = ({
@@ -32718,15 +32947,15 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react23.useContext)(dropZoneContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassName22("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Layers, { size: "16" }) }),
+  const ctx = (0, import_react24.useContext)(dropZoneContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassName22("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Layers, { size: "16" }) }),
       " ",
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: getClassName22(), children: [
-      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassName22("helper"), children: "No items" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: getClassName22(), children: [
+      zoneContent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassName22("helper"), children: "No items" }),
       zoneContent.map((item, i) => {
         var _a;
         const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
@@ -32742,7 +32971,7 @@ var LayerTree = ({
         const selectedItem = itemSelector && data ? getItem(itemSelector, data) : null;
         const isHovering = hoveringComponent === item.props.id;
         const childIsSelected = isChildOfZone(item, selectedItem, ctx);
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "li",
           {
             className: getClassNameLayer({
@@ -32752,7 +32981,7 @@ var LayerTree = ({
               childIsSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "button",
                 {
                   className: getClassNameLayer("clickable"),
@@ -32784,22 +33013,22 @@ var LayerTree = ({
                     setHoveringComponent(null);
                   },
                   children: [
-                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    containsZone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       "div",
                       {
                         className: getClassNameLayer("chevron"),
                         title: isSelected ? "Collapse" : "Expand",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDown, { size: "12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDown, { size: "12" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LayoutGrid, { size: "16" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("icon"), children: item.type === "Text" || item.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LayoutGrid, { size: "16" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("name"), children: (_a = config.components[item.type]["label"]) != null ? _a : item.type })
                     ] })
                   ]
                 }
               ) }),
-              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              containsZone && Object.keys(zonesForItem).map((zoneKey, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 LayerTree,
                 {
                   config,
@@ -32821,13 +33050,13 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_react24 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
-  const setItemSelector = (0, import_react24.useCallback)(
+  const setItemSelector = (0, import_react25.useCallback)(
     (newItemSelector) => {
       dispatch({
         type: "setUi",
@@ -32836,9 +33065,9 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = (0, import_react24.useMemo)(() => overrides.outline || "div", [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const Wrapper = (0, import_react25.useMemo)(() => overrides.outline || "div", [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       LayerTree,
       {
         config,
@@ -32851,7 +33080,7 @@ var Outline = () => {
     ),
     Object.entries(findZonesForArea(data, "root")).map(
       ([zoneKey, zone]) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           LayerTree,
           {
             config,
@@ -32936,12 +33165,12 @@ function usePuckHistory({
 
 // lib/use-history-store.ts
 init_react_import();
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_use_debounce3 = require("use-debounce");
 var EMPTY_HISTORY_INDEX = -1;
 function useHistoryStore() {
-  const [histories, setHistories] = (0, import_react25.useState)([]);
-  const [index, setIndex] = (0, import_react25.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react26.useState)([]);
+  const [index, setIndex] = (0, import_react26.useState)(EMPTY_HISTORY_INDEX);
   const hasPast = index > EMPTY_HISTORY_INDEX;
   const hasFuture = index < histories.length - 1;
   const currentHistory = histories[index];
@@ -33101,22 +33330,22 @@ var getBox = function getBox2(el) {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // components/ViewportControls/index.tsx
 init_react_import();
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default18 = { "ViewportControls": "_ViewportControls_3zdvn_1", "ViewportControls-divider": "_ViewportControls-divider_3zdvn_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_3zdvn_21", "ViewportButton--isActive": "_ViewportButton--isActive_3zdvn_33", "ViewportButton-inner": "_ViewportButton-inner_3zdvn_33" };
 
 // components/ViewportControls/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Monitor, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Monitor, { size: 16 })
 };
 var getClassName23 = get_class_name_factory_default("ViewportControls", styles_module_default18);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default18);
@@ -33128,11 +33357,11 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const [isActive, setIsActive] = (0, import_react26.useState)(false);
-  (0, import_react26.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react27.useState)(false);
+  (0, import_react27.useEffect)(() => {
     setIsActive(width === state.ui.viewports.current.width);
   }, [width, state.ui.viewports.current.width]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     IconButton,
     {
       title,
@@ -33141,7 +33370,7 @@ var ViewportButton = ({
         e.stopPropagation();
         onClick({ width, height });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -33165,7 +33394,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react26.useMemo)(
+  const zoomOptions = (0, import_react27.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -33177,8 +33406,8 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassName23(), children: [
-    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: getClassName23(), children: [
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ViewportButton,
       {
         height: viewport.height,
@@ -33189,8 +33418,8 @@ var ViewportControls = ({
       },
       i
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName23("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       IconButton,
       {
         title: "Zoom viewport out",
@@ -33204,10 +33433,10 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ZoomOut, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomOut, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       IconButton,
       {
         title: "Zoom viewport in",
@@ -33221,11 +33450,11 @@ var ViewportControls = ({
             )].value
           );
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ZoomIn, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ZoomIn, { size: 16 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: getClassName23("divider") }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName23("divider") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "select",
       {
         className: getClassName23("zoomSelect"),
@@ -33233,7 +33462,7 @@ var ViewportControls = ({
         onChange: (e) => {
           onZoom(parseFloat(e.currentTarget.value));
         },
-        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "option",
           {
             value: option.value,
@@ -33281,24 +33510,24 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var getClassName24 = get_class_name_factory_default("PuckCanvas", styles_module_default19);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
   const { status, iframe } = useAppContext();
   const { dispatch, state, overrides, setUi, zoomConfig, setZoomConfig } = useAppContext();
   const { ui } = state;
-  const frameRef = (0, import_react27.useRef)(null);
-  const [showTransition, setShowTransition] = (0, import_react27.useState)(false);
-  const defaultRender = (0, import_react27.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+  const frameRef = (0, import_react28.useRef)(null);
+  const [showTransition, setShowTransition] = (0, import_react28.useState)(false);
+  const defaultRender = (0, import_react28.useMemo)(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react27.useMemo)(
+  const CustomPreview = (0, import_react28.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react27.useCallback)(() => {
+  const getFrameDimensions = (0, import_react28.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -33306,7 +33535,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  const resetAutoZoom = (0, import_react27.useCallback)(
+  const resetAutoZoom = (0, import_react28.useCallback)(
     (ui2 = state.ui) => {
       if (frameRef.current) {
         setZoomConfig(
@@ -33316,11 +33545,11 @@ var Canvas = () => {
     },
     [frameRef, zoomConfig, state.ui]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setShowTransition(false);
     resetAutoZoom();
   }, [frameRef, ui.leftSideBarVisible, ui.rightSideBarVisible]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (ui.viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -33328,7 +33557,7 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const observer = new ResizeObserver(() => {
       setShowTransition(false);
       resetAutoZoom();
@@ -33340,7 +33569,7 @@ var Canvas = () => {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: getClassName24({
@@ -33352,7 +33581,7 @@ var Canvas = () => {
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -33377,7 +33606,7 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: getClassName24("root"),
@@ -33389,7 +33618,7 @@ var Canvas = () => {
               overflow: iframe.enabled ? void 0 : "auto"
             },
             suppressHydrationWarning: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Preview, {}) })
           }
         ) })
       ]
@@ -33398,7 +33627,7 @@ var Canvas = () => {
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var getClassName25 = get_class_name_factory_default("Puck", styles_module_default8);
 function Puck({
   children,
@@ -33416,14 +33645,15 @@ function Puck({
   viewports = defaultViewports,
   iframe = {
     enabled: true
-  }
+  },
+  dnd
 }) {
   var _a;
   const historyStore = useHistoryStore();
-  const [reducer] = (0, import_react28.useState)(
+  const [reducer] = (0, import_react29.useState)(
     () => createReducer({ config, record: historyStore.record })
   );
-  const [initialAppState] = (0, import_react28.useState)(() => {
+  const [initialAppState] = (0, import_react29.useState)(() => {
     var _a2, _b, _c, _d;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -33471,7 +33701,7 @@ function Puck({
       })
     });
   });
-  const [appState, dispatch] = (0, import_react28.useReducer)(
+  const [appState, dispatch] = (0, import_react29.useReducer)(
     reducer,
     flushZones(initialAppState)
   );
@@ -33482,9 +33712,9 @@ function Puck({
     config,
     dispatch
   );
-  const [menuOpen, setMenuOpen] = (0, import_react28.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react29.useState)(false);
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
-  const setItemSelector = (0, import_react28.useCallback)(
+  const setItemSelector = (0, import_react29.useCallback)(
     (newItemSelector) => {
       if (newItemSelector === itemSelector)
         return;
@@ -33497,21 +33727,21 @@ function Puck({
     [itemSelector]
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react28.useState)();
+  const [draggedItem, setDraggedItem] = (0, import_react29.useState)();
   const rootProps = data.root.props || data.root;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (Object.keys(data.root).length > 0 && !data.root.props) {
       console.error(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`. This will be a breaking change in a future release."
       );
     }
   }, []);
-  const toggleSidebars = (0, import_react28.useCallback)(
+  const toggleSidebars = (0, import_react29.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -33525,7 +33755,7 @@ function Puck({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -33548,11 +33778,11 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultRender = (0, import_react28.useMemo)(() => {
-    const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: children2 });
+  const defaultRender = (0, import_react29.useMemo)(() => {
+    const PuckDefault = ({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: children2 });
     return PuckDefault;
   }, []);
-  const defaultHeaderRender = (0, import_react28.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react29.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -33560,45 +33790,45 @@ function Puck({
       const RenderHeader = (_a2) => {
         var _b = _a2, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return defaultRender;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react28.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react29.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
       );
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
     return defaultRender;
   }, [renderHeader]);
-  const loadedOverrides = (0, import_react28.useMemo)(() => {
+  const loadedOverrides = (0, import_react29.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins]);
-  const CustomPuck = (0, import_react28.useMemo)(
+  const CustomPuck = (0, import_react29.useMemo)(
     () => loadedOverrides.puck || defaultRender,
     [loadedOverrides]
   );
-  const CustomHeader = (0, import_react28.useMemo)(
+  const CustomHeader = (0, import_react29.useMemo)(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = (0, import_react28.useMemo)(
+  const CustomHeaderActions = (0, import_react29.useMemo)(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
-  const [mounted, setMounted] = (0, import_react28.useState)(false);
-  (0, import_react28.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react29.useState)(false);
+  (0, import_react29.useEffect)(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "Puck", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     AppProvider,
     {
       value: {
@@ -33613,9 +33843,10 @@ function Puck({
         viewports,
         iframe
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         DragDropContext,
         {
+          autoScrollerOptions: { disabled: dnd == null ? void 0 : dnd.disableAutoScroll },
           onDragUpdate: (update) => {
             setDraggedItem(__spreadValues(__spreadValues({}, draggedItem), update));
             onDragStartOrUpdate(update);
@@ -33668,7 +33899,7 @@ function Puck({
               });
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DropZoneProvider,
             {
               value: {
@@ -33682,7 +33913,7 @@ function Puck({
                 mode: "edit",
                 areaId: "root"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 "div",
                 {
                   className: getClassName25({
@@ -33692,65 +33923,65 @@ function Puck({
                     rightSideBarVisible
                   }),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("layout"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("layout"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         CustomHeader,
                         {
-                          actions: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          actions: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                               Button,
                               {
                                 onClick: () => {
                                   onPublish && onPublish(data);
                                 },
-                                icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Globe, { size: "14px" }),
+                                icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Globe, { size: "14px" }),
                                 children: "Publish"
                               }
                             )
                           ] }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerInner"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerToggle"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("header", { className: getClassName25("header"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerInner"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerToggle"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 IconButton,
                                 {
                                   onClick: () => {
                                     toggleSidebars("left");
                                   },
                                   title: "Toggle left sidebar",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelLeft, { focusable: "false" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelLeft, { focusable: "false" })
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 IconButton,
                                 {
                                   onClick: () => {
                                     toggleSidebars("right");
                                   },
                                   title: "Toggle right sidebar",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PanelRight, { focusable: "false" })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PanelRight, { focusable: "false" })
                                 }
                               ) })
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Heading, { rank: 2, size: "xs", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("headerTitle"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Heading, { rank: 2, size: "xs", children: [
                               headerTitle || rootProps.title || "Page",
-                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+                              headerPath && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
                                 " ",
-                                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
+                                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("code", { className: getClassName25("headerPath"), children: headerPath })
                               ] })
                             ] }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("headerTools"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("headerTools"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 IconButton,
                                 {
                                   onClick: () => {
                                     return setMenuOpen(!menuOpen);
                                   },
                                   title: "Toggle menu bar",
-                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDown, { focusable: "false" })
+                                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDown, { focusable: "false" })
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                                 MenuBar,
                                 {
                                   appState,
@@ -33758,7 +33989,7 @@ function Puck({
                                   dispatch,
                                   onPublish,
                                   menuOpen,
-                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomHeaderActions, {}),
+                                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomHeaderActions, {}),
                                   setMenuOpen
                                 }
                               )
@@ -33766,23 +33997,23 @@ function Puck({
                           ] }) })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Components, {}) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Outline, {}) })
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: getClassName25("leftSideBar"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Components, {}) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Outline, {}) })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Canvas, {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Canvas, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: getClassName25("rightSideBar"), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
                           noBorderTop: true,
                           showBreadcrumbs: true,
                           title: selectedItem ? (_a = config.components[selectedItem.type]["label"]) != null ? _a : selectedItem.type : "Page",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Fields, {})
+                          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Fields, {})
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       "div",
                       {
                         id: "puck-portal-root",
@@ -33806,7 +34037,7 @@ Puck.Preview = Preview;
 
 // components/Render/index.tsx
 init_react_import();
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Render({
   config,
   data
@@ -33815,7 +34046,7 @@ function Render({
   const rootProps = data.root.props || data.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   if ((_a = config.root) == null ? void 0 : _a.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       config.root.render,
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
@@ -33824,11 +34055,11 @@ function Render({
         title,
         editMode: false,
         id: "puck-root",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId })
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId })
       })
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropZone, { zone: rootDroppableId }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropZone, { zone: rootDroppableId }) });
 }
 
 // lib/migrate.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.2-canary.e6e01c6",
+  "version": "0.14.3-canary.73b83ef",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -46,6 +46,7 @@
     "@types/jest": "^29.5.4",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/ua-parser-js": "^0.7.39",
     "css-box-model": "^1.2.1",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
@@ -59,11 +60,13 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
-    "@measured/auto-frame-component": "0.1.1",
-    "@measured/dnd": "16.6.0-canary.f472135",
+    "@measured/dnd": "16.6.0-canary.4cba1d1",
     "deep-diff": "^1.0.2",
+    "object-hash": "^3.0.0",
+    "react-frame-component": "^5.2.6",
     "react-hotkeys-hook": "^4.4.1",
     "react-spinners": "^0.13.8",
+    "ua-parser-js": "^1.0.37",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1"
   },