@measured/puck 0.14.0-canary.924c85a → 0.14.0-canary.9fa2428

package/dist/index.js

@@ -93,7 +93,8 @@ var init_react_import = __esm({
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
-  "../../node_modules/classnames/index.js"(exports, module2) {
+  "../../node_modules/classnames/index.js"(exports2, module2) {
+    "use strict";
     init_react_import();
     (function() {
       "use strict";
@@ -145,7 +146,7 @@ var require_classnames = __commonJS({
 
 // ../../node_modules/scheduler/cjs/scheduler.production.min.js
 var require_scheduler_production_min = __commonJS({
-  "../../node_modules/scheduler/cjs/scheduler.production.min.js"(exports) {
+  "../../node_modules/scheduler/cjs/scheduler.production.min.js"(exports2) {
     "use strict";
     init_react_import();
     function f(a, b) {
@@ -188,12 +189,12 @@ var require_scheduler_production_min = __commonJS({
     }
     if ("object" === typeof performance && "function" === typeof performance.now) {
       l = performance;
-      exports.unstable_now = function() {
+      exports2.unstable_now = function() {
         return l.now();
       };
     } else {
       p = Date, q = p.now();
-      exports.unstable_now = function() {
+      exports2.unstable_now = function() {
         return p.now() - q;
       };
     }
@@ -247,7 +248,7 @@ var require_scheduler_production_min = __commonJS({
             v.callback = null;
             y = v.priorityLevel;
             var e = d(v.expirationTime <= b);
-            b = exports.unstable_now();
+            b = exports2.unstable_now();
             "function" === typeof e ? v.callback = e : v === h(r) && k(r);
             G(b);
           } else
@@ -272,11 +273,11 @@ var require_scheduler_production_min = __commonJS({
     var P = 5;
     var Q = -1;
     function M() {
-      return exports.unstable_now() - Q < P ? false : true;
+      return exports2.unstable_now() - Q < P ? false : true;
     }
     function R() {
       if (null !== O) {
-        var a = exports.unstable_now();
+        var a = exports2.unstable_now();
         Q = a;
         var b = true;
         try {
@@ -310,31 +311,31 @@ var require_scheduler_production_min = __commonJS({
     }
     function K(a, b) {
       L = D(function() {
-        a(exports.unstable_now());
+        a(exports2.unstable_now());
       }, b);
     }
-    exports.unstable_IdlePriority = 5;
-    exports.unstable_ImmediatePriority = 1;
-    exports.unstable_LowPriority = 4;
-    exports.unstable_NormalPriority = 3;
-    exports.unstable_Profiling = null;
-    exports.unstable_UserBlockingPriority = 2;
-    exports.unstable_cancelCallback = function(a) {
+    exports2.unstable_IdlePriority = 5;
+    exports2.unstable_ImmediatePriority = 1;
+    exports2.unstable_LowPriority = 4;
+    exports2.unstable_NormalPriority = 3;
+    exports2.unstable_Profiling = null;
+    exports2.unstable_UserBlockingPriority = 2;
+    exports2.unstable_cancelCallback = function(a) {
       a.callback = null;
     };
-    exports.unstable_continueExecution = function() {
+    exports2.unstable_continueExecution = function() {
       A || z || (A = true, I(J));
     };
-    exports.unstable_forceFrameRate = function(a) {
+    exports2.unstable_forceFrameRate = function(a) {
       0 > a || 125 < a ? console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported") : P = 0 < a ? Math.floor(1e3 / a) : 5;
     };
-    exports.unstable_getCurrentPriorityLevel = function() {
+    exports2.unstable_getCurrentPriorityLevel = function() {
       return y;
     };
-    exports.unstable_getFirstCallbackNode = function() {
+    exports2.unstable_getFirstCallbackNode = function() {
       return h(r);
     };
-    exports.unstable_next = function(a) {
+    exports2.unstable_next = function(a) {
       switch (y) {
         case 1:
         case 2:
@@ -352,11 +353,11 @@ var require_scheduler_production_min = __commonJS({
         y = c;
       }
     };
-    exports.unstable_pauseExecution = function() {
+    exports2.unstable_pauseExecution = function() {
     };
-    exports.unstable_requestPaint = function() {
+    exports2.unstable_requestPaint = function() {
     };
-    exports.unstable_runWithPriority = function(a, b) {
+    exports2.unstable_runWithPriority = function(a, b) {
       switch (a) {
         case 1:
         case 2:
@@ -375,8 +376,8 @@ var require_scheduler_production_min = __commonJS({
         y = c;
       }
     };
-    exports.unstable_scheduleCallback = function(a, b, c) {
-      var d = exports.unstable_now();
+    exports2.unstable_scheduleCallback = function(a, b, c) {
+      var d = exports2.unstable_now();
       "object" === typeof c && null !== c ? (c = c.delay, c = "number" === typeof c && 0 < c ? d + c : d) : c = d;
       switch (a) {
         case 1:
@@ -399,8 +400,8 @@ var require_scheduler_production_min = __commonJS({
       c > d ? (a.sortIndex = c, f(t, a), null === h(r) && a === h(t) && (B ? (E(L), L = -1) : B = true, K(H, c - d))) : (a.sortIndex = e, f(r, a), A || z || (A = true, I(J)));
       return a;
     };
-    exports.unstable_shouldYield = M;
-    exports.unstable_wrapCallback = function(a) {
+    exports2.unstable_shouldYield = M;
+    exports2.unstable_wrapCallback = function(a) {
       var b = y;
       return function() {
         var c = y;
@@ -417,7 +418,7 @@ var require_scheduler_production_min = __commonJS({
 
 // ../../node_modules/scheduler/cjs/scheduler.development.js
 var require_scheduler_development = __commonJS({
-  "../../node_modules/scheduler/cjs/scheduler.development.js"(exports) {
+  "../../node_modules/scheduler/cjs/scheduler.development.js"(exports2) {
     "use strict";
     init_react_import();
     if (process.env.NODE_ENV !== "production") {
@@ -505,13 +506,13 @@ var require_scheduler_development = __commonJS({
         var hasPerformanceNow = typeof performance === "object" && typeof performance.now === "function";
         if (hasPerformanceNow) {
           var localPerformance = performance;
-          exports.unstable_now = function() {
+          exports2.unstable_now = function() {
             return localPerformance.now();
           };
         } else {
           var localDate = Date;
           var initialTime = localDate.now();
-          exports.unstable_now = function() {
+          exports2.unstable_now = function() {
             return localDate.now() - initialTime;
           };
         }
@@ -577,7 +578,7 @@ var require_scheduler_development = __commonJS({
                 return workLoop(hasTimeRemaining, initialTime2);
               } catch (error) {
                 if (currentTask !== null) {
-                  var currentTime = exports.unstable_now();
+                  var currentTime = exports2.unstable_now();
                   markTaskErrored(currentTask, currentTime);
                   currentTask.isQueued = false;
                 }
@@ -606,7 +607,7 @@ var require_scheduler_development = __commonJS({
               currentPriorityLevel = currentTask.priorityLevel;
               var didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
               var continuationCallback = callback(didUserCallbackTimeout);
-              currentTime = exports.unstable_now();
+              currentTime = exports2.unstable_now();
               if (typeof continuationCallback === "function") {
                 currentTask.callback = continuationCallback;
               } else {
@@ -682,7 +683,7 @@ var require_scheduler_development = __commonJS({
           };
         }
         function unstable_scheduleCallback(priorityLevel, callback, options) {
-          var currentTime = exports.unstable_now();
+          var currentTime = exports2.unstable_now();
           var startTime2;
           if (typeof options === "object" && options !== null) {
             var delay = options.delay;
@@ -766,7 +767,7 @@ var require_scheduler_development = __commonJS({
         var frameInterval = frameYieldMs;
         var startTime = -1;
         function shouldYieldToHost() {
-          var timeElapsed = exports.unstable_now() - startTime;
+          var timeElapsed = exports2.unstable_now() - startTime;
           if (timeElapsed < frameInterval) {
             return false;
           }
@@ -787,7 +788,7 @@ var require_scheduler_development = __commonJS({
         }
         var performWorkUntilDeadline = function() {
           if (scheduledHostCallback !== null) {
-            var currentTime = exports.unstable_now();
+            var currentTime = exports2.unstable_now();
             startTime = currentTime;
             var hasTimeRemaining = true;
             var hasMoreWork = true;
@@ -831,7 +832,7 @@ var require_scheduler_development = __commonJS({
         }
         function requestHostTimeout(callback, ms) {
           taskTimeoutID = localSetTimeout(function() {
-            callback(exports.unstable_now());
+            callback(exports2.unstable_now());
           }, ms);
         }
         function cancelHostTimeout() {
@@ -840,24 +841,24 @@ var require_scheduler_development = __commonJS({
         }
         var unstable_requestPaint = requestPaint;
         var unstable_Profiling = null;
-        exports.unstable_IdlePriority = IdlePriority;
-        exports.unstable_ImmediatePriority = ImmediatePriority;
-        exports.unstable_LowPriority = LowPriority;
-        exports.unstable_NormalPriority = NormalPriority;
-        exports.unstable_Profiling = unstable_Profiling;
-        exports.unstable_UserBlockingPriority = UserBlockingPriority;
-        exports.unstable_cancelCallback = unstable_cancelCallback;
-        exports.unstable_continueExecution = unstable_continueExecution;
-        exports.unstable_forceFrameRate = forceFrameRate;
-        exports.unstable_getCurrentPriorityLevel = unstable_getCurrentPriorityLevel;
-        exports.unstable_getFirstCallbackNode = unstable_getFirstCallbackNode;
-        exports.unstable_next = unstable_next;
-        exports.unstable_pauseExecution = unstable_pauseExecution;
-        exports.unstable_requestPaint = unstable_requestPaint;
-        exports.unstable_runWithPriority = unstable_runWithPriority;
-        exports.unstable_scheduleCallback = unstable_scheduleCallback;
-        exports.unstable_shouldYield = shouldYieldToHost;
-        exports.unstable_wrapCallback = unstable_wrapCallback;
+        exports2.unstable_IdlePriority = IdlePriority;
+        exports2.unstable_ImmediatePriority = ImmediatePriority;
+        exports2.unstable_LowPriority = LowPriority;
+        exports2.unstable_NormalPriority = NormalPriority;
+        exports2.unstable_Profiling = unstable_Profiling;
+        exports2.unstable_UserBlockingPriority = UserBlockingPriority;
+        exports2.unstable_cancelCallback = unstable_cancelCallback;
+        exports2.unstable_continueExecution = unstable_continueExecution;
+        exports2.unstable_forceFrameRate = forceFrameRate;
+        exports2.unstable_getCurrentPriorityLevel = unstable_getCurrentPriorityLevel;
+        exports2.unstable_getFirstCallbackNode = unstable_getFirstCallbackNode;
+        exports2.unstable_next = unstable_next;
+        exports2.unstable_pauseExecution = unstable_pauseExecution;
+        exports2.unstable_requestPaint = unstable_requestPaint;
+        exports2.unstable_runWithPriority = unstable_runWithPriority;
+        exports2.unstable_scheduleCallback = unstable_scheduleCallback;
+        exports2.unstable_shouldYield = shouldYieldToHost;
+        exports2.unstable_wrapCallback = unstable_wrapCallback;
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
         }
@@ -868,7 +869,7 @@ var require_scheduler_development = __commonJS({
 
 // ../../node_modules/scheduler/index.js
 var require_scheduler = __commonJS({
-  "../../node_modules/scheduler/index.js"(exports, module2) {
+  "../../node_modules/scheduler/index.js"(exports2, module2) {
     "use strict";
     init_react_import();
     if (process.env.NODE_ENV === "production") {
@@ -881,7 +882,7 @@ var require_scheduler = __commonJS({
 
 // ../../node_modules/react-dom/cjs/react-dom.production.min.js
 var require_react_dom_production_min = __commonJS({
-  "../../node_modules/react-dom/cjs/react-dom.production.min.js"(exports) {
+  "../../node_modules/react-dom/cjs/react-dom.production.min.js"(exports2) {
     "use strict";
     init_react_import();
     var aa = require("react");
@@ -7938,14 +7939,14 @@ var require_react_dom_production_min = __commonJS({
         }
     }
     var wl;
-    exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = tl;
-    exports.createPortal = function(a, b) {
+    exports2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = tl;
+    exports2.createPortal = function(a, b) {
       var c = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : null;
       if (!ol(b))
         throw Error(p(200));
       return dl(a, b, null, c);
     };
-    exports.createRoot = function(a, b) {
+    exports2.createRoot = function(a, b) {
       if (!ol(a))
         throw Error(p(299));
       var c = false, d = "", e = ll;
@@ -7955,7 +7956,7 @@ var require_react_dom_production_min = __commonJS({
       sf(8 === a.nodeType ? a.parentNode : a);
       return new ml(b);
     };
-    exports.findDOMNode = function(a) {
+    exports2.findDOMNode = function(a) {
       if (null == a)
         return null;
       if (1 === a.nodeType)
@@ -7971,15 +7972,15 @@ var require_react_dom_production_min = __commonJS({
       a = null === a ? null : a.stateNode;
       return a;
     };
-    exports.flushSync = function(a) {
+    exports2.flushSync = function(a) {
       return Sk(a);
     };
-    exports.hydrate = function(a, b, c) {
+    exports2.hydrate = function(a, b, c) {
       if (!pl(b))
         throw Error(p(200));
       return sl(null, a, b, true, c);
     };
-    exports.hydrateRoot = function(a, b, c) {
+    exports2.hydrateRoot = function(a, b, c) {
       if (!ol(a))
         throw Error(p(405));
       var d = null != c && c.hydratedSources || null, e = false, f = "", g = ll;
@@ -7995,12 +7996,12 @@ var require_react_dom_production_min = __commonJS({
           );
       return new nl(b);
     };
-    exports.render = function(a, b, c) {
+    exports2.render = function(a, b, c) {
       if (!pl(b))
         throw Error(p(200));
       return sl(null, a, b, false, c);
     };
-    exports.unmountComponentAtNode = function(a) {
+    exports2.unmountComponentAtNode = function(a) {
       if (!pl(a))
         throw Error(p(40));
       return a._reactRootContainer ? (Sk(function() {
@@ -8010,21 +8011,21 @@ var require_react_dom_production_min = __commonJS({
         });
       }), true) : false;
     };
-    exports.unstable_batchedUpdates = Rk;
-    exports.unstable_renderSubtreeIntoContainer = function(a, b, c, d) {
+    exports2.unstable_batchedUpdates = Rk;
+    exports2.unstable_renderSubtreeIntoContainer = function(a, b, c, d) {
       if (!pl(c))
         throw Error(p(200));
       if (null == a || void 0 === a._reactInternals)
         throw Error(p(38));
       return sl(a, b, c, false, d);
     };
-    exports.version = "18.2.0-next-9e3b772b8-20220608";
+    exports2.version = "18.2.0-next-9e3b772b8-20220608";
   }
 });
 
 // ../../node_modules/react-dom/cjs/react-dom.development.js
 var require_react_dom_development = __commonJS({
-  "../../node_modules/react-dom/cjs/react-dom.development.js"(exports) {
+  "../../node_modules/react-dom/cjs/react-dom.development.js"(exports2) {
     "use strict";
     init_react_import();
     if (process.env.NODE_ENV !== "production") {
@@ -29094,18 +29095,18 @@ var require_react_dom_development = __commonJS({
             }
           }
         }
-        exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
-        exports.createPortal = createPortal$1;
-        exports.createRoot = createRoot$1;
-        exports.findDOMNode = findDOMNode;
-        exports.flushSync = flushSync$1;
-        exports.hydrate = hydrate;
-        exports.hydrateRoot = hydrateRoot$1;
-        exports.render = render;
-        exports.unmountComponentAtNode = unmountComponentAtNode;
-        exports.unstable_batchedUpdates = batchedUpdates$1;
-        exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
-        exports.version = ReactVersion;
+        exports2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
+        exports2.createPortal = createPortal$1;
+        exports2.createRoot = createRoot$1;
+        exports2.findDOMNode = findDOMNode;
+        exports2.flushSync = flushSync$1;
+        exports2.hydrate = hydrate;
+        exports2.hydrateRoot = hydrateRoot$1;
+        exports2.render = render;
+        exports2.unmountComponentAtNode = unmountComponentAtNode;
+        exports2.unstable_batchedUpdates = batchedUpdates$1;
+        exports2.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
+        exports2.version = ReactVersion;
         if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function") {
           __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
         }
@@ -29116,7 +29117,7 @@ var require_react_dom_development = __commonJS({
 
 // ../../node_modules/react-dom/index.js
 var require_react_dom = __commonJS({
-  "../../node_modules/react-dom/index.js"(exports, module2) {
+  "../../node_modules/react-dom/index.js"(exports2, module2) {
     "use strict";
     init_react_import();
     function checkDCE() {
@@ -29171,9 +29172,19 @@ init_react_import();
 init_react_import();
 var import_react2 = require("react");
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
-init_react_import();
-var Button_module_default = { "Button": "_Button_8fn3a_1", "Button--medium": "_Button--medium_8fn3a_29", "Button--large": "_Button--large_8fn3a_37", "Button-icon": "_Button-icon_8fn3a_44", "Button--primary": "_Button--primary_8fn3a_48", "Button--secondary": "_Button--secondary_8fn3a_67", "Button--flush": "_Button--flush_8fn3a_82", "Button--disabled": "_Button--disabled_8fn3a_86", "Button--fullWidth": "_Button--fullWidth_8fn3a_93", "Button-spinner": "_Button-spinner_8fn3a_98" };
+// components/Button/Button.module.css
+var Button_default = {
+  Button: "Button_Button",
+  "Button--medium": "Button_Button--medium",
+  "Button--large": "Button_Button--large",
+  "Button-icon": "Button_Button-icon",
+  "Button--primary": "Button_Button--primary",
+  "Button--secondary": "Button_Button--secondary",
+  "Button--flush": "Button_Button--flush",
+  "Button--disabled": "Button_Button--disabled",
+  "Button--fullWidth": "Button_Button--fullWidth",
+  "Button-spinner": "Button_Button-spinner"
+};
 
 // lib/get-class-name-factory.ts
 init_react_import();
@@ -29210,7 +29221,7 @@ var get_class_name_factory_default = getClassNameFactory;
 // components/Button/Button.tsx
 var import_react_spinners = require("react-spinners");
 var import_jsx_runtime = require("react/jsx-runtime");
-var getClassName = get_class_name_factory_default("Button", Button_module_default);
+var getClassName = get_class_name_factory_default("Button", Button_default);
 var Button = ({
   children,
   href,
@@ -29343,12 +29354,14 @@ var defaultContext = {
   history: {},
   viewports: defaultViewports,
   zoomConfig: {
-    autoZoom: 0,
+    autoZoom: 1,
     rootHeight: 0,
     zoom: 1
   },
   setZoomConfig: () => null,
-  status: "LOADING"
+  status: "LOADING",
+  setStatus: () => null,
+  iframe: {}
 };
 var appContext = (0, import_react3.createContext)(defaultContext);
 var AppProvider = ({
@@ -29358,12 +29371,12 @@ var AppProvider = ({
   const [zoomConfig, setZoomConfig] = (0, import_react3.useState)(defaultContext.zoomConfig);
   const [status, setStatus] = (0, import_react3.useState)("LOADING");
   (0, import_react3.useEffect)(() => {
-    setStatus("READY");
+    setStatus("MOUNTED");
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     appContext.Provider,
     {
-      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status }),
+      value: __spreadProps(__spreadValues({}, value), { zoomConfig, setZoomConfig, status, setStatus }),
       children
     }
   );
@@ -29403,13 +29416,20 @@ var defaultSnapshot = {
 var DefaultDroppable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(defaultProvided, defaultSnapshot) });
 var Droppable = (props) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd.Droppable : DefaultDroppable;
+  const El = status !== "LOADING" ? import_dnd.Droppable : DefaultDroppable;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(El, __spreadValues({}, props));
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
-init_react_import();
-var styles_module_default = { "Drawer": "_Drawer_6zh0b_1", "DrawerItem-default": "_DrawerItem-default_6zh0b_5", "DrawerItem-draggableWrapper": "_DrawerItem-draggableWrapper_6zh0b_5", "DrawerItem": "_DrawerItem_6zh0b_5", "DrawerItem-draggable": "_DrawerItem-draggable_6zh0b_5", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_6zh0b_31", "DrawerItem-name": "_DrawerItem-name_6zh0b_47" };
+// components/Drawer/styles.module.css
+var styles_default = {
+  Drawer: "styles_Drawer",
+  "DrawerItem-default": "styles_DrawerItem-default",
+  "DrawerItem-draggableWrapper": "styles_DrawerItem-draggableWrapper",
+  DrawerItem: "styles_DrawerItem",
+  "DrawerItem-draggable": "styles_DrawerItem-draggable",
+  "Drawer--isDraggingFrom": "styles_Drawer--isDraggingFrom",
+  "DrawerItem-name": "styles_DrawerItem-name"
+};
 
 // components/Draggable/index.tsx
 init_react_import();
@@ -29449,7 +29469,7 @@ var Draggable = ({
   isDragDisabled = false
 }) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd2.Draggable : DefaultDraggable;
+  const El = status !== "LOADING" ? import_dnd2.Draggable : DefaultDraggable;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(El, { draggableId: id, index, isDragDisabled, children: (provided, snapshot) => {
     var _a;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -29504,20 +29524,21 @@ var replace = (list, index, newItem) => {
   return result;
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
-init_react_import();
-var styles_module_default2 = { "DragIcon": "_DragIcon_1p5wn_1" };
+// components/DragIcon/styles.module.css
+var styles_default2 = {
+  DragIcon: "styles_DragIcon"
+};
 
 // components/DragIcon/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var getClassName2 = get_class_name_factory_default("DragIcon", styles_module_default2);
+var getClassName2 = get_class_name_factory_default("DragIcon", styles_default2);
 var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName2(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
 
 // components/Drawer/index.tsx
 var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var getClassName3 = get_class_name_factory_default("Drawer", styles_module_default);
-var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_module_default);
+var getClassName3 = get_class_name_factory_default("Drawer", styles_default);
+var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_default);
 var drawerContext = (0, import_react4.createContext)({
   droppableId: ""
 });
@@ -29585,9 +29606,22 @@ init_react_import();
 var import_react7 = require("react");
 var import_dnd3 = require("@measured/dnd");
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
-init_react_import();
-var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_17mte_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_17mte_11", "DraggableComponent-contents": "_DraggableComponent-contents_17mte_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_17mte_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_17mte_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_17mte_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_17mte_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_17mte_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_17mte_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_17mte_97", "DraggableComponent-actions": "_DraggableComponent-actions_17mte_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_17mte_127", "DraggableComponent-action": "_DraggableComponent-action_17mte_97" };
+// components/DraggableComponent/styles.module.css
+var styles_default3 = {
+  DraggableComponent: "styles_DraggableComponent",
+  "DraggableComponent--isDragging": "styles_DraggableComponent--isDragging",
+  "DraggableComponent-contents": "styles_DraggableComponent-contents",
+  "DraggableComponent-overlay": "styles_DraggableComponent-overlay",
+  "DraggableComponent-loadingOverlay": "styles_DraggableComponent-loadingOverlay",
+  "DraggableComponent--isLocked": "styles_DraggableComponent--isLocked",
+  "DraggableComponent--forceHover": "styles_DraggableComponent--forceHover",
+  "DraggableComponent--isSelected": "styles_DraggableComponent--isSelected",
+  "DraggableComponent--indicativeHover": "styles_DraggableComponent--indicativeHover",
+  "DraggableComponent-actionsOverlay": "styles_DraggableComponent-actionsOverlay",
+  "DraggableComponent-actions": "styles_DraggableComponent-actions",
+  "DraggableComponent-actionsLabel": "styles_DraggableComponent-actionsLabel",
+  "DraggableComponent-action": "styles_DraggableComponent-action"
+};
 
 // ../../node_modules/lucide-react/dist/esm/lucide-react.js
 init_react_import();
@@ -29880,7 +29914,7 @@ var useModifierHeld = (modifier) => {
 // components/DraggableComponent/index.tsx
 var import_react_spinners2 = require("react-spinners");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var getClassName4 = get_class_name_factory_default("DraggableComponent", styles_module_default3);
+var getClassName4 = get_class_name_factory_default("DraggableComponent", styles_default3);
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
@@ -29910,7 +29944,7 @@ var DraggableComponent = ({
   const { zoomConfig } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd3.Draggable : DefaultDraggable;
+  const El = status !== "LOADING" ? import_dnd3.Draggable : DefaultDraggable;
   (0, import_react7.useEffect)(onMount, []);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(El, { draggableId: id, index, isDragDisabled, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
@@ -29968,9 +30002,22 @@ var DraggableComponent = ({
   ) }, id);
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
-init_react_import();
-var styles_module_default4 = { "DropZone": "_DropZone_jtf9d_1", "DropZone-content": "_DropZone-content_jtf9d_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_jtf9d_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_jtf9d_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_jtf9d_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_jtf9d_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_jtf9d_27", "DropZone--isDisabled": "_DropZone--isDisabled_jtf9d_28", "DropZone--isRootZone": "_DropZone--isRootZone_jtf9d_29", "DropZone--hasChildren": "_DropZone--hasChildren_jtf9d_30", "DropZone--isDestination": "_DropZone--isDestination_jtf9d_40", "DropZone-item": "_DropZone-item_jtf9d_48", "DropZone-hitbox": "_DropZone-hitbox_jtf9d_52" };
+// components/DropZone/styles.module.css
+var styles_default4 = {
+  DropZone: "styles_DropZone",
+  "DropZone-content": "styles_DropZone-content",
+  "DropZone--userIsDragging": "styles_DropZone--userIsDragging",
+  "DropZone--draggingOverArea": "styles_DropZone--draggingOverArea",
+  "DropZone--draggingNewComponent": "styles_DropZone--draggingNewComponent",
+  "DropZone--isAreaSelected": "styles_DropZone--isAreaSelected",
+  "DropZone--hoveringOverArea": "styles_DropZone--hoveringOverArea",
+  "DropZone--isDisabled": "styles_DropZone--isDisabled",
+  "DropZone--isRootZone": "styles_DropZone--isRootZone",
+  "DropZone--hasChildren": "styles_DropZone--hasChildren",
+  "DropZone--isDestination": "styles_DropZone--isDestination",
+  "DropZone-item": "styles_DropZone-item",
+  "DropZone-hitbox": "styles_DropZone-hitbox"
+};
 
 // components/DropZone/context.tsx
 init_react_import();
@@ -30095,7 +30142,7 @@ var DropZoneProvider = ({
 
 // components/DropZone/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var getClassName5 = get_class_name_factory_default("DropZone", styles_module_default4);
+var getClassName5 = get_class_name_factory_default("DropZone", styles_default4);
 function DropZoneEdit({ zone, allow, disallow, style }) {
   var _a;
   const appContext2 = useAppContext();
@@ -30407,14 +30454,17 @@ init_react_import();
 init_react_import();
 var import_react10 = require("react");
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
-init_react_import();
-var IconButton_module_default = { "IconButton": "_IconButton_swpni_1", "IconButton--disabled": "_IconButton--disabled_swpni_20", "IconButton-title": "_IconButton-title_swpni_33" };
+// components/IconButton/IconButton.module.css
+var IconButton_default = {
+  IconButton: "IconButton_IconButton",
+  "IconButton--disabled": "IconButton_IconButton--disabled",
+  "IconButton-title": "IconButton_IconButton-title"
+};
 
 // components/IconButton/IconButton.tsx
 var import_react_spinners3 = require("react-spinners");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var getClassName6 = get_class_name_factory_default("IconButton", IconButton_module_default);
+var getClassName6 = get_class_name_factory_default("IconButton", IconButton_default);
 var IconButton = ({
   children,
   href,
@@ -30473,21 +30523,33 @@ var import_react28 = require("react");
 // lib/use-placeholder-style.ts
 init_react_import();
 var import_react11 = require("react");
+
+// lib/get-frame.ts
+init_react_import();
+var getFrame = () => {
+  let frame = document.querySelector("#preview-frame");
+  if ((frame == null ? void 0 : frame.tagName) === "IFRAME") {
+    frame = frame.contentDocument;
+  }
+  return frame;
+};
+
+// lib/use-placeholder-style.ts
 var usePlaceholderStyle = () => {
   const queryAttr = "data-rfd-drag-handle-draggable-id";
   const [placeholderStyle, setPlaceholderStyle] = (0, import_react11.useState)();
   const onDragStartOrUpdate = (draggedItem) => {
-    var _a, _b, _c;
+    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 iframe = document.querySelector(`#preview-iframe`);
-    const draggedDOM = document.querySelector(domQuery) || ((_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.document.querySelector(domQuery));
+    const frame = getFrame();
+    const draggedDOM = frame == null ? void 0 : frame.querySelector(domQuery);
     if (!draggedDOM) {
       return;
     }
-    const targetListElement = (_b = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _b.document.querySelector(
+    const targetListElement = frame == null ? void 0 : frame.querySelector(
       `[data-rfd-droppable-id='${droppableId}']`
     );
     const { clientHeight } = draggedDOM;
@@ -30495,7 +30557,7 @@ var usePlaceholderStyle = () => {
       return;
     }
     let clientY = 0;
-    const isSameDroppable = draggedItem.source.droppableId === ((_c = draggedItem.destination) == null ? void 0 : _c.droppableId);
+    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(
@@ -30522,20 +30584,39 @@ var usePlaceholderStyle = () => {
 // components/SidebarSection/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
-init_react_import();
-var styles_module_default5 = { "SidebarSection": "_SidebarSection_125qe_1", "SidebarSection-title": "_SidebarSection-title_125qe_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_125qe_20", "SidebarSection-content": "_SidebarSection-content_125qe_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_125qe_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_125qe_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_125qe_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_125qe_41", "SidebarSection-heading": "_SidebarSection-heading_125qe_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_125qe_86" };
+// components/SidebarSection/styles.module.css
+var styles_default5 = {
+  SidebarSection: "styles_SidebarSection",
+  "SidebarSection-title": "styles_SidebarSection-title",
+  "SidebarSection--noBorderTop": "styles_SidebarSection--noBorderTop",
+  "SidebarSection-content": "styles_SidebarSection-content",
+  "SidebarSection--noPadding": "styles_SidebarSection--noPadding",
+  "SidebarSection-breadcrumbLabel": "styles_SidebarSection-breadcrumbLabel",
+  "SidebarSection-breadcrumbs": "styles_SidebarSection-breadcrumbs",
+  "SidebarSection-breadcrumb": "styles_SidebarSection-breadcrumb",
+  "SidebarSection-heading": "styles_SidebarSection-heading",
+  "SidebarSection-loadingOverlay": "styles_SidebarSection-loadingOverlay"
+};
 
 // 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_default6 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
+// components/Heading/styles.module.css
+var styles_default6 = {
+  Heading: "styles_Heading",
+  "Heading--xxxxl": "styles_Heading--xxxxl",
+  "Heading--xxxl": "styles_Heading--xxxl",
+  "Heading--xxl": "styles_Heading--xxl",
+  "Heading--xl": "styles_Heading--xl",
+  "Heading--l": "styles_Heading--l",
+  "Heading--m": "styles_Heading--m",
+  "Heading--s": "styles_Heading--s",
+  "Heading--xs": "styles_Heading--xs"
+};
 
 // components/Heading/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var getClassName7 = get_class_name_factory_default("Heading", styles_module_default6);
+var getClassName7 = get_class_name_factory_default("Heading", styles_default6);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -30618,7 +30699,7 @@ var useBreadcrumbs = (renderCount) => {
 // components/SidebarSection/index.tsx
 var import_react_spinners4 = require("react-spinners");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var getClassName8 = get_class_name_factory_default("SidebarSection", styles_module_default5);
+var getClassName8 = get_class_name_factory_default("SidebarSection", styles_default5);
 var SidebarSection = ({
   children,
   title,
@@ -31228,13 +31309,17 @@ var useResolvedData = (appState, config, dispatch) => {
 // components/MenuBar/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
-init_react_import();
-var styles_module_default7 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
+// components/MenuBar/styles.module.css
+var styles_default7 = {
+  MenuBar: "styles_MenuBar",
+  "MenuBar--menuOpen": "styles_MenuBar--menuOpen",
+  "MenuBar-inner": "styles_MenuBar-inner",
+  "MenuBar-history": "styles_MenuBar-history"
+};
 
 // components/MenuBar/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var getClassName9 = get_class_name_factory_default("MenuBar", styles_module_default7);
+var getClassName9 = get_class_name_factory_default("MenuBar", styles_default7);
 var MenuBar = ({
   appState,
   data = { content: [], root: { props: { title: "" } } },
@@ -31298,9 +31383,24 @@ var MenuBar = ({
   );
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
-init_react_import();
-var styles_module_default8 = { "Puck": "_Puck_3qn7l_19", "Puck--leftSideBarVisible": "_Puck--leftSideBarVisible_3qn7l_36", "Puck--rightSideBarVisible": "_Puck--rightSideBarVisible_3qn7l_42", "Puck-header": "_Puck-header_3qn7l_96", "Puck-headerInner": "_Puck-headerInner_3qn7l_105", "Puck-headerToggle": "_Puck-headerToggle_3qn7l_115", "Puck-rightSideBarToggle": "_Puck-rightSideBarToggle_3qn7l_122", "Puck-leftSideBarToggle": "_Puck-leftSideBarToggle_3qn7l_123", "Puck-headerTitle": "_Puck-headerTitle_3qn7l_127", "Puck-headerPath": "_Puck-headerPath_3qn7l_131", "Puck-headerTools": "_Puck-headerTools_3qn7l_138", "Puck-menuButton": "_Puck-menuButton_3qn7l_144", "Puck--menuOpen": "_Puck--menuOpen_3qn7l_149", "Puck-leftSideBar": "_Puck-leftSideBar_3qn7l_123", "Puck-frame": "_Puck-frame_3qn7l_168", "Puck-root": "_Puck-root_3qn7l_179", "Puck-rightSideBar": "_Puck-rightSideBar_3qn7l_122", "Puck-canvas": "_Puck-canvas_3qn7l_211", "Puck-canvasControls": "_Puck-canvasControls_3qn7l_226" };
+// components/Puck/styles.module.css
+var styles_default8 = {
+  Puck: "styles_Puck",
+  "Puck--leftSideBarVisible": "styles_Puck--leftSideBarVisible",
+  "Puck--rightSideBarVisible": "styles_Puck--rightSideBarVisible",
+  "Puck-header": "styles_Puck-header",
+  "Puck-headerInner": "styles_Puck-headerInner",
+  "Puck-headerToggle": "styles_Puck-headerToggle",
+  "Puck-rightSideBarToggle": "styles_Puck-rightSideBarToggle",
+  "Puck-leftSideBarToggle": "styles_Puck-leftSideBarToggle",
+  "Puck-headerTitle": "styles_Puck-headerTitle",
+  "Puck-headerPath": "styles_Puck-headerPath",
+  "Puck-headerTools": "styles_Puck-headerTools",
+  "Puck-menuButton": "styles_Puck-menuButton",
+  "Puck--menuOpen": "styles_Puck--menuOpen",
+  "Puck-leftSideBar": "styles_Puck-leftSideBar",
+  "Puck-rightSideBar": "styles_Puck-rightSideBar"
+};
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -31309,9 +31409,19 @@ var import_react_spinners6 = require("react-spinners");
 // components/InputOrGroup/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
-init_react_import();
-var styles_module_default9 = { "Input": "_Input_1qi5b_1", "Input-label": "_Input-label_1qi5b_26", "Input-labelIcon": "_Input-labelIcon_1qi5b_34", "Input-disabledIcon": "_Input-disabledIcon_1qi5b_41", "Input-input": "_Input-input_1qi5b_46", "Input--readOnly": "_Input--readOnly_1qi5b_90", "Input-radioGroupItems": "_Input-radioGroupItems_1qi5b_101", "Input-radio": "_Input-radio_1qi5b_101", "Input-radioInner": "_Input-radioInner_1qi5b_118", "Input-radioInput": "_Input-radioInput_1qi5b_163" };
+// components/InputOrGroup/styles.module.css
+var styles_default9 = {
+  Input: "styles_Input",
+  "Input-label": "styles_Input-label",
+  "Input-labelIcon": "styles_Input-labelIcon",
+  "Input-disabledIcon": "styles_Input-disabledIcon",
+  "Input-input": "styles_Input-input",
+  "Input--readOnly": "styles_Input--readOnly",
+  "Input-radioGroupItems": "styles_Input-radioGroupItems",
+  "Input-radio": "styles_Input-radio",
+  "Input-radioInner": "styles_Input-radioInner",
+  "Input-radioInput": "styles_Input-radioInput"
+};
 
 // components/InputOrGroup/index.tsx
 var import_react18 = require("react");
@@ -31322,9 +31432,22 @@ init_react_import();
 // components/InputOrGroup/fields/ArrayField/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css#css-module
-init_react_import();
-var styles_module_default10 = { "ArrayField": "_ArrayField_1txra_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1txra_13", "ArrayField-addButton": "_ArrayField-addButton_1txra_17", "ArrayField--hasItems": "_ArrayField--hasItems_1txra_32", "ArrayFieldItem": "_ArrayFieldItem_1txra_61", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1txra_69", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1txra_74", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1txra_84", "ArrayFieldItem--readOnly": "_ArrayFieldItem--readOnly_1txra_108", "ArrayFieldItem-body": "_ArrayFieldItem-body_1txra_142", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1txra_150", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1txra_157", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1txra_163" };
+// components/InputOrGroup/fields/ArrayField/styles.module.css
+var styles_default10 = {
+  ArrayField: "styles_ArrayField",
+  "ArrayField--isDraggingFrom": "styles_ArrayField--isDraggingFrom",
+  "ArrayField-addButton": "styles_ArrayField-addButton",
+  "ArrayField--hasItems": "styles_ArrayField--hasItems",
+  ArrayFieldItem: "styles_ArrayFieldItem",
+  "ArrayFieldItem--isDragging": "styles_ArrayFieldItem--isDragging",
+  "ArrayFieldItem--isExpanded": "styles_ArrayFieldItem--isExpanded",
+  "ArrayFieldItem-summary": "styles_ArrayFieldItem-summary",
+  "ArrayFieldItem--readOnly": "styles_ArrayFieldItem--readOnly",
+  "ArrayFieldItem-body": "styles_ArrayFieldItem-body",
+  "ArrayFieldItem-fieldset": "styles_ArrayFieldItem-fieldset",
+  "ArrayFieldItem-rhs": "styles_ArrayFieldItem-rhs",
+  "ArrayFieldItem-actions": "styles_ArrayFieldItem-actions"
+};
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
 var import_react14 = require("react");
@@ -31336,14 +31459,14 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var DefaultDragDropContext = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
 var DragDropContext = (props) => {
   const { status } = useAppContext();
-  const El = status === "READY" ? import_dnd4.DragDropContext : DefaultDragDropContext;
+  const El = status !== "LOADING" ? import_dnd4.DragDropContext : DefaultDragDropContext;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(El, __spreadValues({}, props));
 };
 
 // components/InputOrGroup/fields/ArrayField/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var getClassName10 = get_class_name_factory_default("ArrayField", styles_module_default10);
-var getClassNameItem2 = get_class_name_factory_default("ArrayFieldItem", styles_module_default10);
+var getClassName10 = get_class_name_factory_default("ArrayField", styles_default10);
+var getClassNameItem2 = get_class_name_factory_default("ArrayFieldItem", styles_default10);
 var ArrayField = ({
   field,
   onChange,
@@ -31503,6 +31626,7 @@ var ArrayField = ({
                                   !readOnly && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameItem2("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameItem2("action"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                     IconButton,
                                     {
+                                      type: "button",
                                       disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
                                       onClick: (e) => {
                                         e.stopPropagation();
@@ -31567,6 +31691,7 @@ var ArrayField = ({
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
+                      type: "button",
                       className: getClassName10("addButton"),
                       disabled: field.max !== void 0 && localState.arrayState.items.length >= field.max,
                       onClick: () => {
@@ -31594,7 +31719,7 @@ var ArrayField = ({
 // components/InputOrGroup/fields/DefaultField/index.tsx
 init_react_import();
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var getClassName11 = get_class_name_factory_default("Input", styles_module_default9);
+var getClassName11 = get_class_name_factory_default("Input", styles_default9);
 var DefaultField = ({
   field,
   onChange,
@@ -31647,22 +31772,52 @@ var import_react17 = require("react");
 init_react_import();
 var import_react16 = require("react");
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
-init_react_import();
-var styles_module_default11 = { "ExternalInput-actions": "_ExternalInput-actions_19obq_1", "ExternalInput-button": "_ExternalInput-button_19obq_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_19obq_25", "ExternalInput-detachButton": "_ExternalInput-detachButton_19obq_32", "ExternalInputModal": "_ExternalInputModal_19obq_74", "ExternalInputModal-grid": "_ExternalInputModal-grid_19obq_84", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_19obq_95", "ExternalInputModal-filters": "_ExternalInputModal-filters_19obq_100", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_19obq_119", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_19obq_128", "ExternalInputModal-table": "_ExternalInputModal-table_19obq_128", "ExternalInputModal-thead": "_ExternalInputModal-thead_19obq_144", "ExternalInputModal-th": "_ExternalInputModal-th_19obq_144", "ExternalInputModal-td": "_ExternalInputModal-td_19obq_159", "ExternalInputModal-tr": "_ExternalInputModal-tr_19obq_164", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_19obq_171", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_19obq_197", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_19obq_201", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_19obq_218", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_19obq_222", "ExternalInputModal-search": "_ExternalInputModal-search_19obq_222", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_19obq_259", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_19obq_284", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_19obq_294", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_19obq_308", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_19obq_321", "ExternalInputModal-footer": "_ExternalInputModal-footer_19obq_325" };
+// components/ExternalInput/styles.module.css
+var styles_default11 = {
+  "ExternalInput-actions": "styles_ExternalInput-actions",
+  "ExternalInput-button": "styles_ExternalInput-button",
+  "ExternalInput--dataSelected": "styles_ExternalInput--dataSelected",
+  "ExternalInput-detachButton": "styles_ExternalInput-detachButton",
+  ExternalInputModal: "styles_ExternalInputModal",
+  "ExternalInputModal-grid": "styles_ExternalInputModal-grid",
+  "ExternalInputModal--filtersToggled": "styles_ExternalInputModal--filtersToggled",
+  "ExternalInputModal-filters": "styles_ExternalInputModal-filters",
+  "ExternalInputModal-masthead": "styles_ExternalInputModal-masthead",
+  "ExternalInputModal-tableWrapper": "styles_ExternalInputModal-tableWrapper",
+  "ExternalInputModal-table": "styles_ExternalInputModal-table",
+  "ExternalInputModal-thead": "styles_ExternalInputModal-thead",
+  "ExternalInputModal-th": "styles_ExternalInputModal-th",
+  "ExternalInputModal-td": "styles_ExternalInputModal-td",
+  "ExternalInputModal-tr": "styles_ExternalInputModal-tr",
+  "ExternalInputModal-tbody": "styles_ExternalInputModal-tbody",
+  "ExternalInputModal--hasData": "styles_ExternalInputModal--hasData",
+  "ExternalInputModal-loadingBanner": "styles_ExternalInputModal-loadingBanner",
+  "ExternalInputModal--isLoading": "styles_ExternalInputModal--isLoading",
+  "ExternalInputModal-searchForm": "styles_ExternalInputModal-searchForm",
+  "ExternalInputModal-search": "styles_ExternalInputModal-search",
+  "ExternalInputModal-searchIcon": "styles_ExternalInputModal-searchIcon",
+  "ExternalInputModal-searchIconText": "styles_ExternalInputModal-searchIconText",
+  "ExternalInputModal-searchInput": "styles_ExternalInputModal-searchInput",
+  "ExternalInputModal-searchActions": "styles_ExternalInputModal-searchActions",
+  "ExternalInputModal-searchActionIcon": "styles_ExternalInputModal-searchActionIcon",
+  "ExternalInputModal-footer": "styles_ExternalInputModal-footer"
+};
 
 // components/Modal/index.tsx
 init_react_import();
 var import_react15 = require("react");
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css#css-module
-init_react_import();
-var styles_module_default12 = { "Modal": "_Modal_ikbaj_1", "Modal--isOpen": "_Modal--isOpen_ikbaj_15", "Modal-inner": "_Modal-inner_ikbaj_19" };
+// components/Modal/styles.module.css
+var styles_default12 = {
+  Modal: "styles_Modal",
+  "Modal--isOpen": "styles_Modal--isOpen",
+  "Modal-inner": "styles_Modal-inner"
+};
 
 // components/Modal/index.tsx
 var import_react_dom = __toESM(require_react_dom());
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var getClassName12 = get_class_name_factory_default("Modal", styles_module_default12);
+var getClassName12 = get_class_name_factory_default("Modal", styles_default12);
 var Modal = ({
   children,
   onClose,
@@ -31691,8 +31846,8 @@ var Modal = ({
 // components/ExternalInput/index.tsx
 var import_react_spinners5 = require("react-spinners");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var getClassName13 = get_class_name_factory_default("ExternalInput", styles_module_default11);
-var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default11);
+var getClassName13 = get_class_name_factory_default("ExternalInput", styles_default11);
+var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_default11);
 var dataCache = {};
 var ExternalInput = ({
   field,
@@ -31756,6 +31911,7 @@ var ExternalInput = ({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
+              type: "button",
               onClick: () => setOpen(true),
               className: getClassName13("button"),
               children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -31943,7 +32099,7 @@ var ExternalField = ({
 // components/InputOrGroup/fields/RadioField/index.tsx
 init_react_import();
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var getClassName14 = get_class_name_factory_default("Input", styles_module_default9);
+var getClassName14 = get_class_name_factory_default("Input", styles_default9);
 var RadioField = ({
   field,
   onChange,
@@ -31998,7 +32154,7 @@ var RadioField = ({
 // components/InputOrGroup/fields/SelectField/index.tsx
 init_react_import();
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var getClassName15 = get_class_name_factory_default("Input", styles_module_default9);
+var getClassName15 = get_class_name_factory_default("Input", styles_default9);
 var SelectField = ({
   field,
   onChange,
@@ -32048,7 +32204,7 @@ var SelectField = ({
 // components/InputOrGroup/fields/TextareaField/index.tsx
 init_react_import();
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var getClassName16 = get_class_name_factory_default("Input", styles_module_default9);
+var getClassName16 = get_class_name_factory_default("Input", styles_default9);
 var TextareaField = ({
   onChange,
   readOnly,
@@ -32087,14 +32243,16 @@ var import_use_debounce2 = require("use-debounce");
 // components/InputOrGroup/fields/ObjectField/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css#css-module
-init_react_import();
-var styles_module_default13 = { "ObjectField": "_ObjectField_15j63_5", "ObjectField-fieldset": "_ObjectField-fieldset_15j63_13" };
+// components/InputOrGroup/fields/ObjectField/styles.module.css
+var styles_default13 = {
+  ObjectField: "styles_ObjectField",
+  "ObjectField-fieldset": "styles_ObjectField-fieldset"
+};
 
 // components/InputOrGroup/fields/ObjectField/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var getClassName17 = get_class_name_factory_default("ObjectField", styles_module_default13);
-var getClassNameItem3 = get_class_name_factory_default("ObjectFieldItem", styles_module_default13);
+var getClassName17 = get_class_name_factory_default("ObjectField", styles_default13);
+var getClassNameItem3 = get_class_name_factory_default("ObjectFieldItem", styles_default13);
 var ObjectField = ({
   field,
   onChange,
@@ -32148,7 +32306,7 @@ var ObjectField = ({
 
 // components/InputOrGroup/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var getClassName18 = get_class_name_factory_default("Input", styles_module_default9);
+var getClassName18 = get_class_name_factory_default("Input", styles_default9);
 var FieldLabel = ({
   children,
   icon,
@@ -32251,14 +32409,16 @@ var InputOrGroup = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }));
 };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
-init_react_import();
-var styles_module_default14 = { "PuckFields": "_PuckFields_17k3p_1", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_17k3p_6" };
+// components/Puck/components/Fields/styles.module.css
+var styles_default14 = {
+  PuckFields: "styles_PuckFields",
+  "PuckFields-loadingOverlay": "styles_PuckFields-loadingOverlay"
+};
 
 // components/Puck/components/Fields/index.tsx
 var import_react19 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var getClassName19 = get_class_name_factory_default("PuckFields", styles_module_default14);
+var getClassName19 = get_class_name_factory_default("PuckFields", styles_default14);
 var defaultPageFields = {
   title: { type: "text" }
 };
@@ -32408,13 +32568,18 @@ var import_react20 = require("react");
 // components/ComponentList/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
-init_react_import();
-var styles_module_default15 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
+// components/ComponentList/styles.module.css
+var styles_default15 = {
+  ComponentList: "styles_ComponentList",
+  "ComponentList--isExpanded": "styles_ComponentList--isExpanded",
+  "ComponentList-content": "styles_ComponentList-content",
+  "ComponentList-title": "styles_ComponentList-title",
+  "ComponentList-titleIcon": "styles_ComponentList-titleIcon"
+};
 
 // components/ComponentList/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var getClassName20 = get_class_name_factory_default("ComponentList", styles_module_default15);
+var getClassName20 = get_class_name_factory_default("ComponentList", styles_default15);
 var ComponentListItem = ({
   name,
   label,
@@ -32550,15 +32715,17 @@ init_react_import();
 var import_react22 = require("react");
 var import_auto_frame_component = __toESM(require("@measured/auto-frame-component"));
 
-// 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_379hm_1", "PuckPreview-iframe": "_PuckPreview-iframe_379hm_5", "PuckPreview-content": "_PuckPreview-content_379hm_11", "PuckPreview--stylesLoaded": "_PuckPreview--stylesLoaded_379hm_18" };
+// components/Puck/components/Preview/styles.module.css
+var styles_default16 = {
+  PuckPreview: "styles_PuckPreview",
+  "PuckPreview-frame": "styles_PuckPreview-frame"
+};
 
 // components/Puck/components/Preview/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var getClassName21 = get_class_name_factory_default("PuckPreview", styles_module_default16);
+var getClassName21 = get_class_name_factory_default("PuckPreview", styles_default16);
 var Preview = ({ id = "puck-preview" }) => {
-  const { config, dispatch, state } = useAppContext();
+  const { config, dispatch, state, setStatus, iframe } = useAppContext();
   const Page = (0, import_react22.useCallback)(
     (pageProps) => {
       var _a, _b;
@@ -32568,30 +32735,27 @@ var Preview = ({ id = "puck-preview" }) => {
   );
   const rootProps = state.data.root.props || state.data.root;
   const ref = (0, import_react22.useRef)(null);
-  const [stylesLoaded, setStylesLoaded] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
-      className: getClassName21({ stylesLoaded }),
+      className: getClassName21(),
       id,
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: getClassName21("content"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         import_auto_frame_component.default,
         {
-          id: "preview-iframe",
-          className: getClassName21("iframe"),
+          id: "preview-frame",
+          className: getClassName21("frame"),
           "data-rfd-iframe": true,
           ref,
-          debug: true,
           onStylesLoaded: () => {
-            console.log("callback");
-            setStylesLoaded(true);
+            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 }) }))
         }
-      ) })
+      ) : /* @__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 }) })) })
     }
   );
 };
@@ -32623,9 +32787,24 @@ var areaContainsZones = (data, area) => {
 // components/LayerTree/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
-init_react_import();
-var styles_module_default17 = { "LayerTree": "_LayerTree_1pgw8_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1pgw8_11", "LayerTree-helper": "_LayerTree-helper_1pgw8_17", "Layer": "_Layer_1pgw8_1", "Layer-inner": "_Layer-inner_1pgw8_29", "Layer--containsZone": "_Layer--containsZone_1pgw8_35", "Layer-clickable": "_Layer-clickable_1pgw8_39", "Layer--isSelected": "_Layer--isSelected_1pgw8_61", "Layer-chevron": "_Layer-chevron_1pgw8_77", "Layer--childIsSelected": "_Layer--childIsSelected_1pgw8_78", "Layer-zones": "_Layer-zones_1pgw8_82", "Layer-title": "_Layer-title_1pgw8_96", "Layer-name": "_Layer-name_1pgw8_105", "Layer-icon": "_Layer-icon_1pgw8_111", "Layer-zoneIcon": "_Layer-zoneIcon_1pgw8_116" };
+// components/LayerTree/styles.module.css
+var styles_default17 = {
+  LayerTree: "styles_LayerTree",
+  "LayerTree-zoneTitle": "styles_LayerTree-zoneTitle",
+  "LayerTree-helper": "styles_LayerTree-helper",
+  Layer: "styles_Layer",
+  "Layer-inner": "styles_Layer-inner",
+  "Layer--containsZone": "styles_Layer--containsZone",
+  "Layer-clickable": "styles_Layer-clickable",
+  "Layer--isSelected": "styles_Layer--isSelected",
+  "Layer-chevron": "styles_Layer-chevron",
+  "Layer--childIsSelected": "styles_Layer--childIsSelected",
+  "Layer-zones": "styles_Layer-zones",
+  "Layer-title": "styles_Layer-title",
+  "Layer-name": "styles_Layer-name",
+  "Layer-icon": "styles_Layer-icon",
+  "Layer-zoneIcon": "styles_Layer-zoneIcon"
+};
 
 // lib/scroll-into-view.ts
 init_react_import();
@@ -32654,8 +32833,8 @@ var isChildOfZone = (item, maybeChild, ctx) => {
 
 // components/LayerTree/index.tsx
 var import_jsx_runtime30 = 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 getClassName22 = get_class_name_factory_default("LayerTree", styles_default17);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_default17);
 var LayerTree = ({
   data,
   config,
@@ -32714,14 +32893,9 @@ var LayerTree = ({
                       zone
                     });
                     const id = zoneContent[i].props.id;
-                    const iframe = document.querySelector("#preview-iframe");
-                    if (!(iframe == null ? void 0 : iframe.contentDocument)) {
-                      throw new Error(
-                        `Preview iframe could not be found when trying to scroll to item ${id}`
-                      );
-                    }
+                    const frame = getFrame();
                     scrollIntoView(
-                      iframe.contentDocument.querySelector(
+                      frame == null ? void 0 : frame.querySelector(
                         `[data-rfd-drag-handle-draggable-id="draggable-${id}"]`
                       )
                     );
@@ -33060,9 +33234,14 @@ var import_react27 = require("react");
 init_react_import();
 var import_react26 = 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_14bhf_1", "ViewportControls-divider": "_ViewportControls-divider_14bhf_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_14bhf_21", "ViewportButton--isActive": "_ViewportButton--isActive_14bhf_33", "ViewportButton-inner": "_ViewportButton-inner_14bhf_33" };
+// components/ViewportControls/styles.module.css
+var styles_default18 = {
+  ViewportControls: "styles_ViewportControls",
+  "ViewportControls-divider": "styles_ViewportControls-divider",
+  "ViewportControls-zoomSelect": "styles_ViewportControls-zoomSelect",
+  "ViewportButton--isActive": "styles_ViewportButton--isActive",
+  "ViewportButton-inner": "styles_ViewportButton-inner"
+};
 
 // components/ViewportControls/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -33071,8 +33250,8 @@ var icons = {
   Tablet: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tablet, { size: 16 }),
   Monitor: /* @__PURE__ */ (0, import_jsx_runtime32.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);
+var getClassName23 = get_class_name_factory_default("ViewportControls", styles_default18);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_default18);
 var ViewportButton = ({
   children,
   height = "auto",
@@ -33081,7 +33260,10 @@ var ViewportButton = ({
   onClick
 }) => {
   const { state } = useAppContext();
-  const isActive = width === state.ui.viewports.current.width;
+  const [isActive, setIsActive] = (0, import_react26.useState)(false);
+  (0, import_react26.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)(
     IconButton,
     {
@@ -33110,8 +33292,7 @@ var ViewportControls = ({
   onViewportChange,
   onZoom
 }) => {
-  const { state, viewports } = useAppContext();
-  const viewport = state.ui.viewports.current;
+  const { viewports } = useAppContext();
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
@@ -33128,14 +33309,14 @@ var ViewportControls = ({
     [autoZoom]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getClassName23(), children: [
-    viewports.map((viewport2, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ViewportButton,
       {
-        height: viewport2.height,
-        width: viewport2.width,
-        title: viewport2.label ? `Switch to ${viewport2.label} viewport` : "Switch viewport",
+        height: viewport.height,
+        width: viewport.width,
+        title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
         onClick: onViewportChange,
-        children: typeof viewport2.icon === "string" ? icons[viewport2.icon] || viewport2.icon : viewport2.icon || icons.Smartphone
+        children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
       },
       i
     )),
@@ -33196,6 +33377,15 @@ var ViewportControls = ({
   ] });
 };
 
+// components/Puck/components/Canvas/styles.module.css
+var styles_default19 = {
+  PuckCanvas: "styles_PuckCanvas",
+  "PuckCanvas-controls": "styles_PuckCanvas-controls",
+  "PuckCanvas-inner": "styles_PuckCanvas-inner",
+  "PuckCanvas-root": "styles_PuckCanvas-root",
+  "PuckCanvas--ready": "styles_PuckCanvas--ready"
+};
+
 // lib/get-zoom-config.ts
 init_react_import();
 var RESET_ZOOM_SMALLER_THAN_FRAME = true;
@@ -33228,9 +33418,10 @@ var getZoomConfig = (uiViewport, frame, zoom) => {
 
 // components/Puck/components/Canvas/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var getClassName24 = get_class_name_factory_default("Puck", styles_module_default8);
+var getClassName24 = get_class_name_factory_default("PuckCanvas", styles_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);
@@ -33288,14 +33479,16 @@ var Canvas = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
-      className: getClassName24("canvas"),
+      className: getClassName24({
+        ready: status === "READY" || !iframe.enabled
+      }),
       onClick: () => dispatch({
         type: "setUi",
         ui: { itemSelector: null },
         recordHistory: true
       }),
       children: [
-        ui.viewports.controlsVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("canvasControls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ui.viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ViewportControls,
           {
             autoZoom: zoomConfig.autoZoom,
@@ -33320,15 +33513,16 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("frame"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: getClassName24("inner"), ref: frameRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: getClassName24("root"),
             style: {
-              width: ui.viewports.current.width,
+              width: iframe.enabled ? ui.viewports.current.width : void 0,
               height: zoomConfig.rootHeight,
-              transform: `scale(${zoomConfig.zoom})`,
-              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : ""
+              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+              transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
+              overflow: iframe.enabled ? void 0 : "auto"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Preview, {}) })
           }
@@ -33340,7 +33534,7 @@ var Canvas = () => {
 
 // components/Puck/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var getClassName25 = get_class_name_factory_default("Puck", styles_module_default8);
+var getClassName25 = get_class_name_factory_default("Puck", styles_default8);
 function Puck({
   children,
   config,
@@ -33354,7 +33548,10 @@ function Puck({
   renderHeaderActions,
   headerTitle,
   headerPath,
-  viewports = defaultViewports
+  viewports = defaultViewports,
+  iframe = {
+    enabled: true
+  }
 }) {
   var _a;
   const historyStore = useHistoryStore();
@@ -33372,17 +33569,19 @@ function Puck({
         diff: Math.abs(viewportWidth - value.width)
       })).sort((a, b) => a.diff > b.diff ? 1 : -1);
       const closestViewport = viewportDifferences[0].key;
-      clientUiState = __spreadProps(__spreadValues({}, window.matchMedia("(min-width: 638px)").matches ? {} : {
-        leftSideBarVisible: false,
-        rightSideBarVisible: false
-      }), {
-        viewports: __spreadProps(__spreadValues({}, initial.viewports), {
-          current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-            height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || viewports[closestViewport].height || "auto",
-            width: ((_d = (_c = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _c.current) == null ? void 0 : _d.width) || viewports[closestViewport].width
+      if (iframe.enabled) {
+        clientUiState = __spreadProps(__spreadValues({}, window.matchMedia("(min-width: 638px)").matches ? {} : {
+          leftSideBarVisible: false,
+          rightSideBarVisible: false
+        }), {
+          viewports: __spreadProps(__spreadValues({}, initial.viewports), {
+            current: __spreadProps(__spreadValues({}, initial.viewports.current), {
+              height: ((_b = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b.height) || viewports[closestViewport].height || "auto",
+              width: ((_d = (_c = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _c.current) == null ? void 0 : _d.width) || viewports[closestViewport].width
+            })
           })
-        })
-      });
+        });
+      }
     }
     return __spreadProps(__spreadValues({}, defaultAppState), {
       data: initialData,
@@ -33540,7 +33739,8 @@ function Puck({
           plugins,
           overrides: loadedOverrides,
           history,
-          viewports
+          viewports,
+          iframe
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           DragDropContext,