@puckeditor/core 0.21.1 → 0.21.2-canary.0bbe7fec

package/dist/index.js

@@ -1651,6 +1651,21 @@ var init_flatten_node = __esm({
   }
 });
 
+// lib/data/to-component.ts
+var toComponent;
+var init_to_component = __esm({
+  "lib/data/to-component.ts"() {
+    "use strict";
+    init_react_import();
+    toComponent = (item) => {
+      return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+        props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+        type: "root"
+      });
+    };
+  }
+});
+
 // lib/data/walk-app-state.ts
 function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
   var _a;
@@ -1714,7 +1729,7 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
       id
     });
     processRelatedZones(item, id, path);
-    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
+    const newItem = __spreadProps(__spreadValues({}, mappedItem), { props: newProps });
     const thisZoneCompound = path[path.length - 1];
     const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
     newNodeIndex[id] = {
@@ -1754,17 +1769,14 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
     );
     newZones[zoneCompound] = newContent2;
   }, newZones);
-  const processedRoot = processItem(
-    {
-      type: "root",
-      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
-    },
-    [],
-    -1
-  );
-  const root = __spreadProps(__spreadValues({}, state.data.root), {
-    props: processedRoot.props
+  let rootAsComponent = toComponent({
+    props: __spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root)
   });
+  if (state.data.root.readOnly) {
+    rootAsComponent.readOnly = state.data.root.readOnly;
+  }
+  const processedRoot = processItem(rootAsComponent, [], -1);
+  const root = __spreadValues(__spreadValues({}, state.data.root), processedRoot);
   return __spreadProps(__spreadValues({}, state), {
     data: {
       root,
@@ -1785,6 +1797,7 @@ var init_walk_app_state = __esm({
     init_root_droppable_id();
     init_map_fields();
     init_flatten_node();
+    init_to_component();
   }
 });
 
@@ -2566,7 +2579,8 @@ var init_use_hotkey = __esm({
       KeyY: "y",
       KeyZ: "z",
       Delete: "delete",
-      Backspace: "backspace"
+      Backspace: "backspace",
+      AltRight: "altRight"
     };
     useHotkeyStore = (0, import_zustand3.create)()(
       (0, import_middleware2.subscribeWithSelector)((set) => ({
@@ -2579,6 +2593,10 @@ var init_use_hotkey = __esm({
     );
     monitorHotkeys = (doc) => {
       const onKeyDown = (e) => {
+        if (e.getModifierState("AltGraph")) {
+          useHotkeyStore.getState().hold("altRight");
+          return;
+        }
         const key = keyCodeMap[e.code];
         if (key) {
           useHotkeyStore.getState().hold(key);
@@ -2602,6 +2620,10 @@ var init_use_hotkey = __esm({
         }
       };
       const onKeyUp = (e) => {
+        if (!e.getModifierState("AltGraph") && e.code === "ControlRight") {
+          useHotkeyStore.getState().release("altRight");
+          return;
+        }
         const key = keyCodeMap[e.code];
         if (key) {
           if (key === "meta") {
@@ -2677,12 +2699,12 @@ function useRegisterHistorySlice(appStore, {
   const forward = () => {
     appStore.getState().history.forward();
   };
-  useHotkey({ meta: true, z: true }, back);
-  useHotkey({ meta: true, shift: true, z: true }, forward);
-  useHotkey({ meta: true, y: true }, forward);
-  useHotkey({ ctrl: true, z: true }, back);
-  useHotkey({ ctrl: true, shift: true, z: true }, forward);
-  useHotkey({ ctrl: true, y: true }, forward);
+  useHotkey({ altRight: false, meta: true, z: true }, back);
+  useHotkey({ altRight: false, meta: true, shift: true, z: true }, forward);
+  useHotkey({ altRight: false, meta: true, y: true }, forward);
+  useHotkey({ altRight: false, ctrl: true, z: true }, back);
+  useHotkey({ altRight: false, ctrl: true, shift: true, z: true }, forward);
+  useHotkey({ altRight: false, ctrl: true, y: true }, forward);
 }
 var import_react7, EMPTY_HISTORY_INDEX, tidyState, createHistorySlice;
 var init_history = __esm({
@@ -3110,21 +3132,6 @@ var init_fields = __esm({
   }
 });
 
-// lib/data/to-component.ts
-var toComponent;
-var init_to_component = __esm({
-  "lib/data/to-component.ts"() {
-    "use strict";
-    init_react_import();
-    toComponent = (item) => {
-      return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
-        props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
-        type: "root"
-      });
-    };
-  }
-});
-
 // lib/resolve-component-data.ts
 var import_fast_equals2, cache, resolveComponentData;
 var init_resolve_component_data = __esm({
@@ -3320,6 +3327,7 @@ var init_store = __esm({
           },
           status: "LOADING",
           iframe: {},
+          _experimentalFullScreenCanvas: false,
           metadata: {},
           fieldTransforms: {}
         }, initialAppStore), {
@@ -6298,6 +6306,40 @@ var SubFieldInternal = ({
 };
 var SubField = (0, import_react16.memo)(SubFieldInternal);
 
+// lib/data/set-deep.ts
+init_react_import();
+function setDeep(node, path, newVal) {
+  const parts = path.split(".");
+  const newNode = __spreadValues({}, node);
+  let cur = newNode;
+  for (let i = 0; i < parts.length; i++) {
+    const [prop, idxStr] = parts[i].replace("]", "").split("[");
+    const isLast = i === parts.length - 1;
+    if (idxStr !== void 0) {
+      if (!Array.isArray(cur[prop])) {
+        cur[prop] = [];
+      }
+      const idx = Number(idxStr);
+      if (isLast) {
+        cur[prop][idx] = newVal;
+        continue;
+      }
+      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
+      cur = cur[prop][idx];
+      continue;
+    }
+    if (isLast) {
+      cur[prop] = newVal;
+      continue;
+    }
+    if (cur[prop] === void 0) {
+      cur[prop] = {};
+    }
+    cur = cur[prop];
+  }
+  return __spreadValues(__spreadValues({}, node), newNode);
+}
+
 // components/AutoField/fields/ArrayField/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
@@ -6365,9 +6407,10 @@ var ArrayFieldItemInternal = ({
           {
             ref: handleRef,
             onClick: (e) => {
-              if (isDragging || !hasVisibleFields) return;
+              if (isDragging) return;
               e.preventDefault();
               e.stopPropagation();
+              if (!hasVisibleFields) return;
               onToggleExpand(id, isExpanded);
             },
             className: getClassNameItem("summary"),
@@ -6731,10 +6774,13 @@ var useLocalValue = (path, onChange) => {
   const value = useDeepField(path);
   const isFocused = useIsFocused(path);
   const [localValue, setLocalValue] = (0, import_react18.useState)(value == null ? void 0 : value.toString());
-  const onChangeLocal = (0, import_react18.useCallback)((val) => {
-    setLocalValue(val);
-    onChange(val);
-  }, []);
+  const onChangeLocal = (0, import_react18.useCallback)(
+    (val) => {
+      setLocalValue(val);
+      onChange(val);
+    },
+    [onChange]
+  );
   (0, import_react18.useEffect)(() => {
     if (!isFocused) {
       setLocalValue(value);
@@ -7927,21 +7973,6 @@ var import_shallow4 = require("zustand/react/shallow");
 init_get_item();
 var import_sortable2 = require("@dnd-kit/react/sortable");
 
-// lib/accumulate-transform.ts
-init_react_import();
-function accumulateTransform(el) {
-  let matrix = new DOMMatrixReadOnly();
-  let n = el.parentElement;
-  while (n && n !== document.documentElement) {
-    const t = getComputedStyle(n).transform;
-    if (t && t !== "none") {
-      matrix = new DOMMatrixReadOnly(t).multiply(matrix);
-    }
-    n = n.parentElement;
-  }
-  return { scaleX: matrix.a, scaleY: matrix.d };
-}
-
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
 var import_react50 = require("react");
@@ -7980,6 +8011,7 @@ init_RichTextMenu();
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("DraggableComponent", styles_module_default15);
 var DEBUG2 = false;
+var MEASURE_EVERY_MS = 100;
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
@@ -8019,9 +8051,13 @@ var DraggableComponent = ({
       return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) === id ? s.zoomConfig.zoom : 1;
     }
   );
+  const _experimentalFullScreenCanvas = useAppStore(
+    (s) => s._experimentalFullScreenCanvas
+  );
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
   const iframe = useAppStore((s) => s.iframe);
+  const lastMeasureRef = (0, import_react51.useRef)(0);
   const ctx = (0, import_react51.useContext)(dropZoneContext);
   const [localZones, setLocalZones] = (0, import_react51.useState)({});
   const registerLocalZone = (0, import_react51.useCallback)(
@@ -8126,45 +8162,71 @@ var DraggableComponent = ({
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
-  }, [iframe.enabled, ref.current]);
+  }, [iframe.enabled]);
   const getStyle = (0, import_react51.useCallback)(() => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!ref.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const deepScrollPosition = getDeepScrollPosition(ref.current);
-    const portalContainerEl = iframe.enabled ? null : (_a = ref.current) == null ? void 0 : _a.closest("[data-puck-preview]");
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    const portalContainerEl = iframe.enabled ? null : el.closest("[data-puck-preview]");
+    const targetIsFixed = (() => {
+      let node = el;
+      while (node && node !== document.documentElement) {
+        if (getComputedStyle(node).position === "fixed") {
+          return true;
+        }
+        node = node.parentElement;
+      }
+      return false;
+    })();
     const portalContainerRect = portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
     const portalScroll = portalContainerEl ? getDeepScrollPosition(portalContainerEl) : { x: 0, y: 0 };
-    const scroll = {
-      x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
-      y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
-    };
-    const untransformed = {
-      height: ref.current.offsetHeight,
-      width: ref.current.offsetWidth
+    const deepScrollPosition = targetIsFixed ? { x: 0, y: 0 } : getDeepScrollPosition(el);
+    const scroll = targetIsFixed ? { x: 0, y: 0 } : {
+      x: deepScrollPosition.x - portalScroll.x - ((_a = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _a : 0),
+      y: deepScrollPosition.y - portalScroll.y - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _b : 0)
     };
-    const transform = accumulateTransform(ref.current);
     const style2 = {
-      left: `${(rect.left + scroll.x) / transform.scaleX}px`,
-      top: `${(rect.top + scroll.y) / transform.scaleY}px`,
-      height: `${untransformed.height}px`,
-      width: `${untransformed.width}px`
+      left: `${rect.left + scroll.x}px`,
+      top: `${rect.top + scroll.y}px`,
+      height: `${rect.height}px`,
+      width: `${rect.width}px`,
+      position: targetIsFixed ? "fixed" : void 0
     };
     return style2;
-  }, [ref.current]);
+  }, [iframe.enabled]);
   const [style, setStyle] = (0, import_react51.useState)();
+  const lastRectRef = (0, import_react51.useRef)(null);
+  const syncRafRef = (0, import_react51.useRef)(null);
   const sync = (0, import_react51.useCallback)(() => {
     setStyle(getStyle());
-  }, [ref.current, iframe]);
+  }, [getStyle]);
+  const scheduleSync = (0, import_react51.useCallback)(() => {
+    if (syncRafRef.current != null) return;
+    syncRafRef.current = requestAnimationFrame(() => {
+      syncRafRef.current = null;
+      sync();
+    });
+  }, [sync]);
+  (0, import_react51.useEffect)(() => {
+    return () => {
+      if (syncRafRef.current != null) {
+        cancelAnimationFrame(syncRafRef.current);
+        syncRafRef.current = null;
+      }
+    };
+  }, []);
   (0, import_react51.useEffect)(() => {
     if (ref.current) {
-      const observer = new ResizeObserver(sync);
+      const observer = new ResizeObserver(() => {
+        scheduleSync();
+      });
       observer.observe(ref.current);
       return () => {
         observer.disconnect();
       };
     }
-  }, [ref.current]);
+  }, [scheduleSync]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
   const hideOverlay = (0, import_react51.useCallback)(() => {
     setIsVisible(false);
@@ -8203,11 +8265,11 @@ var DraggableComponent = ({
       if (!el.closest("[data-puck-overlay-portal]")) {
         e.stopPropagation();
       }
-      if (isSelected) {
+      if (_experimentalFullScreenCanvas) {
         dispatch({
           type: "setUi",
           ui: {
-            itemSelector: null
+            itemSelector: isSelected ? null : { index, zone: zoneCompound }
           }
         });
       } else {
@@ -8219,7 +8281,7 @@ var DraggableComponent = ({
         });
       }
     },
-    [index, zoneCompound, id, isSelected]
+    [index, zoneCompound, id, isSelected, _experimentalFullScreenCanvas]
   );
   const appStore = useAppStoreApi();
   const onSelectParent = (0, import_react51.useCallback)(() => {
@@ -8313,7 +8375,7 @@ var DraggableComponent = ({
   (0, import_react51.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
-        sync();
+        scheduleSync();
         setIsVisible(true);
         setThisWasDragging(false);
       } else {
@@ -8340,6 +8402,43 @@ var DraggableComponent = ({
   (0, import_react51.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
+  (0, import_react51.useEffect)(() => {
+    if (!dragFinished || !(isSelected || thisIsDragging)) return;
+    const el = ref.current;
+    if (!el) return;
+    const doc = el.ownerDocument;
+    const view = doc.defaultView;
+    if (!view) return;
+    lastMeasureRef.current = 0;
+    scheduleSync();
+    const onScroll = () => scheduleSync();
+    const onResize = () => scheduleSync();
+    doc.addEventListener("scroll", onScroll, true);
+    view.addEventListener("resize", onResize);
+    let frame = 0;
+    const tick = (t) => {
+      if (t - lastMeasureRef.current >= MEASURE_EVERY_MS) {
+        lastMeasureRef.current = t;
+        const node = ref.current;
+        if (node) {
+          const rect = node.getBoundingClientRect();
+          const prev = lastRectRef.current;
+          const changed = !prev || Math.abs(rect.x - prev.x) > 0.5 || Math.abs(rect.y - prev.y) > 0.5 || Math.abs(rect.width - prev.width) > 0.5 || Math.abs(rect.height - prev.height) > 0.5;
+          if (changed) {
+            lastRectRef.current = rect;
+            scheduleSync();
+          }
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => {
+      doc.removeEventListener("scroll", onScroll, true);
+      view.removeEventListener("resize", onResize);
+      cancelAnimationFrame(frame);
+    };
+  }, [dragFinished, isSelected, thisIsDragging, scheduleSync]);
   const syncActionsPosition = (0, import_react51.useCallback)(
     (el) => {
       if (el) {
@@ -9115,40 +9214,6 @@ var styles_module_default17 = { "InlineTextField": "_InlineTextField_104qp_1" };
 // components/InlineTextField/index.tsx
 init_lib();
 
-// lib/data/set-deep.ts
-init_react_import();
-function setDeep(node, path, newVal) {
-  const parts = path.split(".");
-  const newNode = __spreadValues({}, node);
-  let cur = newNode;
-  for (let i = 0; i < parts.length; i++) {
-    const [prop, idxStr] = parts[i].replace("]", "").split("[");
-    const isLast = i === parts.length - 1;
-    if (idxStr !== void 0) {
-      if (!Array.isArray(cur[prop])) {
-        cur[prop] = [];
-      }
-      const idx = Number(idxStr);
-      if (isLast) {
-        cur[prop][idx] = newVal;
-        continue;
-      }
-      if (cur[prop][idx] === void 0) cur[prop][idx] = {};
-      cur = cur[prop][idx];
-      continue;
-    }
-    if (isLast) {
-      cur[prop] = newVal;
-      continue;
-    }
-    if (cur[prop] === void 0) {
-      cur[prop] = {};
-    }
-    cur = cur[prop];
-  }
-  return __spreadValues(__spreadValues({}, node), newNode);
-}
-
 // lib/get-selector-for-id.ts
 init_react_import();
 var getSelectorForId = (state, id) => {
@@ -10500,24 +10565,9 @@ var DragDropContextClient = ({
               zoneStore.setState({ draggedItem: null });
               if (event.canceled || (target == null ? void 0 : target.type) === "void") {
                 zoneStore.setState({ previewIndex: {} });
-                if (thisPreview) {
-                  zoneStore.setState({ previewIndex: {} });
-                  if (thisPreview.type === "insert") {
-                    insertComponent(
-                      thisPreview.componentType,
-                      thisPreview.zone,
-                      thisPreview.index,
-                      appStore
-                    );
-                  } else if (initialSelector.current) {
-                    moveComponent(
-                      thisPreview.props.id,
-                      initialSelector.current,
-                      thisPreview,
-                      appStore
-                    );
-                  }
-                }
+                (_a2 = dragListeners.dragend) == null ? void 0 : _a2.forEach((fn) => {
+                  fn(event, manager);
+                });
                 dispatch({
                   type: "setUi",
                   ui: {
@@ -10525,9 +10575,6 @@ var DragDropContextClient = ({
                     isDragging: false
                   }
                 });
-                (_a2 = dragListeners.dragend) == null ? void 0 : _a2.forEach((fn) => {
-                  fn(event, manager);
-                });
                 return;
               }
               if (thisPreview) {
@@ -10540,14 +10587,12 @@ var DragDropContextClient = ({
                     appStore
                   );
                 } else if (initialSelector.current) {
-                  dispatch({
-                    type: "move",
-                    sourceIndex: initialSelector.current.index,
-                    sourceZone: initialSelector.current.zone,
-                    destinationIndex: thisPreview.index,
-                    destinationZone: thisPreview.zone,
-                    recordHistory: false
-                  });
+                  moveComponent(
+                    thisPreview.props.id,
+                    initialSelector.current,
+                    thisPreview,
+                    appStore
+                  );
                 }
               }
               dispatch({
@@ -10556,7 +10601,7 @@ var DragDropContextClient = ({
                   itemSelector: { index, zone },
                   isDragging: false
                 },
-                recordHistory: true
+                recordHistory: false
               });
               (_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
                 fn(event, manager);
@@ -11403,20 +11448,28 @@ var CopyHostStyles = ({
       filtered.forEach((mirror) => {
         mirror.onload = () => {
           stylesLoaded = stylesLoaded + 1;
-          if (stylesLoaded >= elements.length) {
+          if (stylesLoaded >= filtered.length) {
             onStylesLoaded();
           }
         };
         mirror.onerror = () => {
           console.warn(`AutoFrame couldn't load a stylesheet`);
           stylesLoaded = stylesLoaded + 1;
-          if (stylesLoaded >= elements.length) {
+          if (stylesLoaded >= filtered.length) {
             onStylesLoaded();
           }
         };
       });
       doc.head.innerHTML = "";
       doc.head.append(...filtered);
+      filtered.forEach((mirror) => {
+        if (mirror.nodeName === "STYLE") {
+          stylesLoaded = stylesLoaded + 1;
+        }
+      });
+      if (stylesLoaded >= filtered.length) {
+        onStylesLoaded();
+      }
       observer.observe(parentDocument.head, { childList: true, subtree: true });
       filtered.forEach((el) => {
         const elHash = (0, import_object_hash.default)(el.outerHTML);
@@ -12773,12 +12826,10 @@ var getClassName36 = get_class_name_factory_default("PuckCanvas", styles_module_
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
+  var _a;
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const {
-    _experimentalFullScreenCanvas,
-    viewports: viewportOptions = defaultViewports
-  } = usePropsContext();
+  const { viewports: viewportOptions = defaultViewports, ui: uiProp } = usePropsContext();
   const {
     dispatch,
     overrides,
@@ -12786,7 +12837,8 @@ var Canvas = () => {
     zoomConfig,
     setZoomConfig,
     status,
-    iframe
+    iframe,
+    _experimentalFullScreenCanvas
   } = useAppStore(
     (0, import_shallow10.useShallow)((s) => ({
       dispatch: s.dispatch,
@@ -12795,7 +12847,8 @@ var Canvas = () => {
       zoomConfig: s.zoomConfig,
       setZoomConfig: s.setZoomConfig,
       status: s.status,
-      iframe: s.iframe
+      iframe: s.iframe,
+      _experimentalFullScreenCanvas: s._experimentalFullScreenCanvas
     }))
   );
   const {
@@ -12874,10 +12927,11 @@ var Canvas = () => {
   }, []);
   const appStoreApi = useAppStoreApi();
   (0, import_react88.useEffect)(() => {
-    var _a;
+    var _a2, _b;
     if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
     const viewportWidth = window.innerWidth;
-    const frameWidth = (_a = frameRef.current) == null ? void 0 : _a.getBoundingClientRect().width;
+    const frameWidth = (_b = frameRef.current) == null ? void 0 : _b.getBoundingClientRect().width;
     if (!viewportWidth) return;
     if (!frameWidth) return;
     if (viewportOptions.length === 0) return;
@@ -12916,7 +12970,13 @@ var Canvas = () => {
       }
       appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-  }, [viewportOptions, frameRef.current, iframe, appStoreApi]);
+  }, [
+    viewportOptions,
+    frameRef.current,
+    iframe,
+    appStoreApi,
+    (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "div",
     {
@@ -12931,7 +12991,7 @@ var Canvas = () => {
           dispatch({
             type: "setUi",
             ui: { itemSelector: null },
-            recordHistory: true
+            recordHistory: false
           });
         }
       },
@@ -13669,7 +13729,8 @@ function PuckProvider({ children }) {
     initialHistory: _initialHistory,
     metadata,
     onAction,
-    fieldTransforms
+    fieldTransforms,
+    _experimentalFullScreenCanvas
   } = usePropsContext();
   const iframe = (0, import_react93.useMemo)(
     () => __spreadValues({
@@ -13762,6 +13823,7 @@ function PuckProvider({ children }) {
         overrides: loadedOverrides,
         viewports,
         iframe,
+        _experimentalFullScreenCanvas: !!_experimentalFullScreenCanvas,
         onAction,
         metadata,
         fieldTransforms: loadedFieldTransforms
@@ -13775,6 +13837,7 @@ function PuckProvider({ children }) {
       loadedOverrides,
       viewports,
       iframe,
+      _experimentalFullScreenCanvas,
       onAction,
       metadata,
       loadedFieldTransforms
@@ -13791,7 +13854,16 @@ function PuckProvider({ children }) {
   (0, import_react93.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
-  }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
+  }, [
+    config,
+    plugins,
+    loadedOverrides,
+    viewports,
+    iframe,
+    _experimentalFullScreenCanvas,
+    onAction,
+    metadata
+  ]);
   useRegisterHistorySlice(appStore, {
     histories: blendedHistories,
     index: initialHistoryIndex,