@puckeditor/core 0.21.2-canary.edc81920 → 0.21.2

package/dist/index.js

@@ -2807,44 +2807,39 @@ var init_nodes = __esm({
   "store/slices/nodes.ts"() {
     "use strict";
     init_react_import();
-    createNodesSlice = (set, get) => ({
-      nodes: {},
-      registerNode: (id, node) => {
-        const s = get().nodes;
-        const emptyNode = {
-          id,
-          methods: {
-            sync: () => null,
-            hideOverlay: () => null,
-            showOverlay: () => null
-          },
-          element: null
-        };
-        const existingNode = s.nodes[id];
-        set({
-          nodes: __spreadProps(__spreadValues({}, s), {
-            nodes: __spreadProps(__spreadValues({}, s.nodes), {
-              [id]: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, emptyNode), existingNode), node), {
-                id
-              })
-            })
-          })
-        });
-      },
-      unregisterNode: (id) => {
-        const s = get().nodes;
-        const existingNode = s.nodes[id];
-        if (existingNode) {
-          const newNodes = __spreadValues({}, s.nodes);
-          delete newNodes[id];
-          set({
-            nodes: __spreadProps(__spreadValues({}, s), {
-              nodes: newNodes
-            })
+    createNodesSlice = (_set, _get) => {
+      const registry = /* @__PURE__ */ new Map();
+      return {
+        registerNode: (id, handle) => {
+          registry.set(id, handle);
+        },
+        unregisterNode: (id) => {
+          registry.delete(id);
+        },
+        syncNode: (id) => {
+          var _a;
+          if (!id) return;
+          (_a = registry.get(id)) == null ? void 0 : _a.sync();
+        },
+        syncNodes: (ids) => {
+          ids.forEach((id) => {
+            var _a;
+            if (!id) return;
+            (_a = registry.get(id)) == null ? void 0 : _a.sync();
           });
+        },
+        setOverlayVisible: (id, visible) => {
+          if (!id) return;
+          const node = registry.get(id);
+          if (!node) return;
+          if (visible) {
+            node.showOverlay();
+            return;
+          }
+          node.hideOverlay();
         }
-      }
-    });
+      };
+    };
   }
 });
 
@@ -3327,6 +3322,8 @@ var init_store = __esm({
           },
           status: "LOADING",
           iframe: {},
+          _experimentalFullScreenCanvas: false,
+          _experimentalVirtualization: false,
           metadata: {},
           fieldTransforms: {}
         }, initialAppStore), {
@@ -3462,7 +3459,8 @@ var init_store = __esm({
               state,
               config,
               (content) => content,
-              (childItem) => {
+              (childItem, path) => {
+                if (path.length > 1) return childItem;
                 resolveComponentData2(childItem, "load").then((resolved) => {
                   const { state: state2 } = get();
                   const node = state2.indexes.nodes[resolved.node.props.id];
@@ -6773,10 +6771,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);
@@ -7867,19 +7868,19 @@ var styles_module_default14 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable":
 
 // components/Drawer/index.tsx
 init_get_class_name_factory();
-var import_react70 = require("react");
+var import_react71 = require("react");
 init_generate_id();
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react68 = require("@dnd-kit/react");
+var import_react69 = require("@dnd-kit/react");
 init_store();
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_dom = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
@@ -7932,7 +7933,12 @@ var ZoneStoreContext = (0, import_react49.createContext)(
     draggedItem: null,
     previewIndex: {},
     enabledIndex: {},
-    hoveringComponent: null
+    hoveringComponent: null,
+    registerRootVirtualizer: () => {
+    },
+    unregisterRootVirtualizer: () => {
+    },
+    scrollToComponent: () => false
   }))
 );
 var ZoneStoreProvider = ({
@@ -7969,21 +7975,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");
@@ -8019,9 +8010,27 @@ var useOnDragFinished = (cb, deps = []) => {
 
 // components/DraggableComponent/index.tsx
 init_RichTextMenu();
+
+// lib/assign-refs.ts
+init_react_import();
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+}
+function assignRefs(refs, node) {
+  refs.forEach((ref) => {
+    assignRef(ref, node);
+  });
+}
+
+// components/DraggableComponent/index.tsx
 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);
@@ -8053,7 +8062,8 @@ var DraggableComponent = ({
   label,
   autoDragAxis,
   userDragAxis,
-  inDroppableZone = true
+  inDroppableZone = true,
+  itemRef
 }) => {
   const zoom = useAppStore(
     (s) => {
@@ -8061,9 +8071,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)(
@@ -8158,9 +8172,12 @@ var DraggableComponent = ({
       if (ref.current !== el) {
         ref.current = el;
         setRerender((update) => update + 1);
+        if (itemRef) {
+          assignRefs([itemRef], el);
+        }
       }
     },
-    [sortableRef]
+    [itemRef, sortableRef]
   );
   const [portalEl, setPortalEl] = (0, import_react51.useState)();
   (0, import_react51.useEffect)(() => {
@@ -8168,69 +8185,98 @@ 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]);
+    if (itemRef) {
+      assignRefs([itemRef], ref.current);
+    }
+  }, [getStyle, itemRef]);
+  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, itemRef]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
+  const unregisterNode = useAppStore((s) => s.nodes.unregisterNode);
   const hideOverlay = (0, import_react51.useCallback)(() => {
     setIsVisible(false);
   }, []);
   const showOverlay = (0, import_react51.useCallback)(() => {
     setIsVisible(true);
   }, []);
+  const nodeHandleRef = (0, import_react51.useRef)({
+    sync: () => null,
+    hideOverlay: () => null,
+    showOverlay: () => null
+  });
+  (0, import_react51.useLayoutEffect)(() => {
+    nodeHandleRef.current.sync = sync;
+    nodeHandleRef.current.hideOverlay = hideOverlay;
+    nodeHandleRef.current.showOverlay = showOverlay;
+  }, [hideOverlay, showOverlay, sync]);
   (0, import_react51.useEffect)(() => {
-    var _a;
-    registerNode(id, {
-      methods: { sync, showOverlay, hideOverlay },
-      element: (_a = ref.current) != null ? _a : null
-    });
+    registerNode(id, nodeHandleRef.current);
     return () => {
-      registerNode(id, {
-        methods: {
-          sync: () => null,
-          hideOverlay: () => null,
-          showOverlay: () => null
-        },
-        element: null
-      });
+      unregisterNode(id);
     };
-  }, [id, zoneCompound, index, componentType, sync]);
+  }, [id, registerNode, unregisterNode]);
   const CustomActionBar = (0, import_react51.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
@@ -8245,11 +8291,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 {
@@ -8261,7 +8307,7 @@ var DraggableComponent = ({
         });
       }
     },
-    [index, zoneCompound, id, isSelected]
+    [index, zoneCompound, id, isSelected, _experimentalFullScreenCanvas]
   );
   const appStore = useAppStoreApi();
   const onSelectParent = (0, import_react51.useCallback)(() => {
@@ -8355,7 +8401,7 @@ var DraggableComponent = ({
   (0, import_react51.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
-        sync();
+        scheduleSync();
         setIsVisible(true);
         setThisWasDragging(false);
       } else {
@@ -8382,6 +8428,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) {
@@ -8542,7 +8625,7 @@ var styles_module_default16 = { "DropZone": "_DropZone_1i2sv_1", "DropZone--hasC
 
 // components/DropZone/index.tsx
 init_store();
-var import_react67 = require("@dnd-kit/react");
+var import_react68 = require("@dnd-kit/react");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
@@ -8567,7 +8650,6 @@ var useMinEmptyHeight = ({
   const numItems = (0, import_react52.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
-      var _a;
       if (finished) {
         const newNumItems = getNumItems(appStore, zoneCompound);
         setPrevHeight(0);
@@ -8578,19 +8660,15 @@ var useMinEmptyHeight = ({
         const selectedItem = appStore.getState().selectedItem;
         const zones = appStore.getState().state.indexes.zones;
         const nodes = appStore.getState().nodes;
-        (_a = nodes.nodes[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.methods.hideOverlay();
+        nodes.setOverlayVisible(selectedItem == null ? void 0 : selectedItem.props.id, false);
         setTimeout(() => {
-          var _a2;
-          const contentIds = ((_a2 = zones[zoneCompound]) == null ? void 0 : _a2.contentIds) || [];
-          contentIds.forEach((contentId) => {
-            const node = nodes.nodes[contentId];
-            node == null ? void 0 : node.methods.sync();
-          });
+          var _a;
+          const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
+          nodes.syncNodes(contentIds);
           if (selectedItem) {
             setTimeout(() => {
-              var _a3, _b;
-              (_a3 = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _a3.methods.sync();
-              (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.showOverlay();
+              nodes.syncNode(selectedItem.props.id);
+              nodes.setOverlayVisible(selectedItem.props.id, true);
             }, 200);
           }
           setIsAnimating(false);
@@ -8614,21 +8692,6 @@ var useMinEmptyHeight = ({
   return [prevHeight ? `${prevHeight}px` : returnedMinHeight, isAnimating];
 };
 
-// lib/assign-refs.ts
-init_react_import();
-function assignRef(ref, node) {
-  if (typeof ref === "function") {
-    ref(node);
-  } else if (ref && typeof ref === "object" && "current" in ref) {
-    ref.current = node;
-  }
-}
-function assignRefs(refs, node) {
-  refs.forEach((ref) => {
-    assignRef(ref, node);
-  });
-}
-
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
 var import_react55 = require("react");
@@ -9487,8 +9550,209 @@ var MemoizeComponent = (0, import_react65.memo)(RenderComponent, (prev, next) =>
   return prev.Component === next.Component && shallowEqual(prev.componentProps, next.componentProps, ["puck"]) && puckEquals;
 });
 
+// components/DropZone/VirtualizedDropZone.tsx
+init_react_import();
+var import_react66 = require("react");
+init_store();
+var import_react_virtual = require("@tanstack/react-virtual");
+
+// lib/get-frame.ts
+init_react_import();
+var getFrame = () => {
+  if (typeof window === "undefined") return;
+  let frameEl = document.querySelector("#preview-frame");
+  if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
+    return frameEl.contentDocument || document;
+  }
+  return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
+};
+
+// components/DropZone/VirtualizedDropZone.tsx
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var ROOT_ZONE_VIRTUALIZATION_OVERSCAN = 5;
+var DEFAULT_VIRTUALIZED_ITEM_HEIGHT = 320;
+var measuredItemHeights = /* @__PURE__ */ new Map();
+var getEstimatedItemHeight = (componentId) => {
+  var _a;
+  return (_a = measuredItemHeights.get(componentId)) != null ? _a : DEFAULT_VIRTUALIZED_ITEM_HEIGHT;
+};
+var cacheMeasuredItemHeight = (componentId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredItemHeights.set(componentId, height);
+};
+var VirtualizedDropZone = ({
+  contentIds,
+  zoneCompound,
+  renderItem
+}) => {
+  const selectedId = useAppStore((s) => {
+    var _a, _b;
+    return (_b = (_a = s.selectedItem) == null ? void 0 : _a.props.id) != null ? _b : null;
+  });
+  const frame = getFrame();
+  const zoneStore = (0, import_react66.useContext)(ZoneStoreContext);
+  const draggedItemId = useContextStore(ZoneStoreContext, (s) => {
+    var _a;
+    const draggedId = (_a = s.draggedItem) == null ? void 0 : _a.id;
+    return draggedId ? String(draggedId) : null;
+  });
+  const dragTargetParentId = useContextStore(ZoneStoreContext, (s) => {
+    var _a, _b;
+    if ((_a = s.draggedItem) == null ? void 0 : _a.id) {
+      const parentZone = Object.keys((_b = s.previewIndex) != null ? _b : {})[0];
+      return parentZone == null ? void 0 : parentZone.split(":")[0];
+    }
+    return null;
+  });
+  const iframeWindow = frame == null ? void 0 : frame.defaultView;
+  const measureRefsRef = (0, import_react66.useRef)(/* @__PURE__ */ new Map());
+  const appStoreApi = useAppStoreApi();
+  const resolveIndex = (0, import_react66.useCallback)(
+    (targetId) => {
+      var _a, _b, _c, _d;
+      if (!targetId || targetId === "root") {
+        return -1;
+      }
+      const directIndex = contentIds.indexOf(targetId);
+      if (directIndex > -1) {
+        return directIndex;
+      }
+      const path = (_c = (_b = (_a = appStoreApi.getState().state.indexes.nodes) == null ? void 0 : _a[targetId]) == null ? void 0 : _b.path) != null ? _c : [];
+      for (let i = path.length - 1; i >= 0; i -= 1) {
+        const candidateId = (_d = path[i]) == null ? void 0 : _d.split(":")[0];
+        if (!candidateId || candidateId === "root") {
+          continue;
+        }
+        const index = contentIds.indexOf(candidateId);
+        if (index > -1) {
+          return index;
+        }
+      }
+      return -1;
+    },
+    [appStoreApi, contentIds]
+  );
+  const pinnedIndexes = (0, import_react66.useMemo)(() => {
+    const nextPinnedIndexes = /* @__PURE__ */ new Set();
+    [selectedId, draggedItemId, dragTargetParentId].forEach((targetId) => {
+      const currentIndex = resolveIndex(targetId);
+      if (currentIndex > -1) {
+        nextPinnedIndexes.add(currentIndex);
+      }
+    });
+    return Array.from(nextPinnedIndexes).sort((a, b) => a - b);
+  }, [dragTargetParentId, draggedItemId, resolveIndex, selectedId]);
+  const rangeExtractor = (0, import_react66.useCallback)(
+    (range) => {
+      const indexes = (0, import_react_virtual.defaultRangeExtractor)(range);
+      pinnedIndexes.forEach((index) => {
+        if (!indexes.includes(index)) {
+          indexes.push(index);
+        }
+      });
+      indexes.sort((a, b) => a - b);
+      return indexes;
+    },
+    [pinnedIndexes]
+  );
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: contentIds.length,
+    getItemKey: (index) => contentIds[index],
+    estimateSize: (index) => getEstimatedItemHeight(contentIds[index]),
+    getScrollElement: () => iframeWindow != null ? iframeWindow : null,
+    overscan: ROOT_ZONE_VIRTUALIZATION_OVERSCAN,
+    observeElementRect: (instance, cb) => iframeWindow ? (0, import_react_virtual.observeWindowRect)(instance, cb) : (0, import_react_virtual.observeElementRect)(instance, cb),
+    observeElementOffset: (instance, cb) => iframeWindow ? (0, import_react_virtual.observeWindowOffset)(instance, cb) : (0, import_react_virtual.observeElementOffset)(instance, cb),
+    scrollToFn: (offset, options, instance) => iframeWindow ? (0, import_react_virtual.windowScroll)(offset, options, instance) : (0, import_react_virtual.elementScroll)(offset, options, instance),
+    rangeExtractor,
+    initialOffset: () => iframeWindow ? iframeWindow.scrollY : 0
+  });
+  (0, import_react66.useEffect)(() => {
+    zoneStore.getState().registerRootVirtualizer(zoneCompound, {
+      resolveIndex: (targetId) => resolveIndex(targetId),
+      virtualizer
+    });
+    return () => {
+      zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
+    };
+  }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
+  const getMeasureRef = (0, import_react66.useCallback)((componentId) => {
+    const cachedRef = measureRefsRef.current.get(componentId);
+    if (cachedRef) {
+      return cachedRef;
+    }
+    const measureRef = (element) => {
+      if (!element) {
+        return;
+      }
+      const height = Math.ceil(element.getBoundingClientRect().height) || DEFAULT_VIRTUALIZED_ITEM_HEIGHT;
+      if (typeof height === "number" && height > 0) {
+        cacheMeasuredItemHeight(componentId, height);
+      }
+    };
+    measureRefsRef.current.set(componentId, measureRef);
+    return measureRef;
+  }, []);
+  (0, import_react66.useEffect)(() => {
+    const validIds = new Set(contentIds);
+    Array.from(measureRefsRef.current.keys()).forEach((componentId) => {
+      if (!validIds.has(componentId)) {
+        measureRefsRef.current.delete(componentId);
+      }
+    });
+  }, [contentIds]);
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const renderedItems = (0, import_react66.useMemo)(() => {
+    const items = [];
+    let previousEnd = 0;
+    let previousIndex = -1;
+    virtualItems.forEach((virtualItem) => {
+      if (!virtualItem) return;
+      const componentId = contentIds[virtualItem.index];
+      const gapSize = Math.max(virtualItem.start - previousEnd, 0);
+      if (gapSize > 0) {
+        items.push(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            "div",
+            {
+              style: { height: `${gapSize}px` }
+            },
+            `gap:${previousIndex}:${virtualItem.index}`
+          )
+        );
+      }
+      items.push(
+        renderItem({
+          componentId,
+          index: virtualItem.index,
+          measureRef: getMeasureRef(componentId)
+        })
+      );
+      previousEnd = virtualItem.end;
+      previousIndex = virtualItem.index;
+    });
+    const trailingGap = Math.max(totalSize - previousEnd, 0);
+    if (trailingGap > 0) {
+      items.push(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "div",
+          {
+            style: { height: `${trailingGap}px` }
+          },
+          `gap:${previousIndex}:end`
+        )
+      );
+    }
+    return items;
+  }, [totalSize, virtualItems, getMeasureRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: renderedItems });
+};
+
 // components/DropZone/index.tsx
-var import_jsx_runtime67 = (
+var import_jsx_runtime68 = (
   // Safe to use this since the HTML is set by the user
   require("react/jsx-runtime")
 );
@@ -9501,24 +9765,25 @@ var InsertPreview = ({
   override
 }) => {
   if (element) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DrawerItemInner, { name: label, children: override });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DrawerItemInner, { name: label, children: override });
 };
-var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
   index,
   dragAxis,
   collisionAxis,
-  inDroppableZone
+  inDroppableZone,
+  itemRef
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react66.useContext)(dropZoneContext);
+  const ctx = (0, import_react67.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react66.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react67.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
     (0, import_shallow6.useShallow)((s) => {
       var _a2;
@@ -9538,7 +9803,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react66.useMemo)(() => {
+  const item = (0, import_react67.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -9560,7 +9825,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = (0, import_react66.useMemo)(
+  const puckProps = (0, import_react67.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -9583,7 +9848,7 @@ var DropZoneChild = ({
     }
   );
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
-  const defaultsProps = (0, import_react66.useMemo)(
+  const defaultsProps = (0, import_react67.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -9591,7 +9856,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = (0, import_react66.useMemo)(
+  const defaultedNode = (0, import_react67.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -9601,8 +9866,8 @@ var DropZoneChild = ({
   const config = useAppStore((s) => s.config);
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
-  const combinedFieldTransforms = (0, import_react66.useMemo)(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+  const combinedFieldTransforms = (0, import_react67.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -9616,13 +9881,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     DraggableComponent,
     {
       id: componentId,
@@ -9636,10 +9901,11 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
+      itemRef,
       children: (dragRef) => {
         var _a2;
         if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             MemoizeComponent,
             {
               Component: Render2,
@@ -9649,14 +9915,14 @@ var DropZoneChild = ({
             }
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           InsertPreview,
           {
             label,
             override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
             element: "element" in item && item.element ? item.element : void 0
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           MemoizeComponent,
           {
             Component: Render2,
@@ -9667,8 +9933,8 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneChildMemo = (0, import_react66.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react66.forwardRef)(
+var DropZoneChildMemo = (0, import_react67.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react67.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -9679,7 +9945,7 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = (0, import_react66.useContext)(dropZoneContext);
+    const ctx = (0, import_react67.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -9717,14 +9983,14 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react66.useEffect)(() => {
+    (0, import_react67.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react66.useEffect)(() => {
+    (0, import_react67.useEffect)(() => {
       if (zoneType === "dropzone") {
         if (zoneCompound !== rootDroppableId) {
           console.warn(
@@ -9733,11 +9999,11 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
         }
       }
     }, [zoneType]);
-    const contentIds = (0, import_react66.useMemo)(() => {
+    const contentIds = (0, import_react67.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react66.useRef)(null);
-    const acceptsTarget = (0, import_react66.useCallback)(
+    const ref = (0, import_react67.useRef)(null);
+    const acceptsTarget = (0, import_react67.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -9775,7 +10041,7 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react66.useEffect)(() => {
+    (0, import_react67.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -9790,8 +10056,8 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react66.useContext)(ZoneStoreContext);
-    (0, import_react66.useEffect)(() => {
+    const zoneStore = (0, import_react67.useContext)(ZoneStoreContext);
+    (0, import_react67.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -9810,7 +10076,7 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react67.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react68.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -9820,14 +10086,19 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
       userMinEmptyHeight,
       ref
     });
-    const setRefs = (0, import_react66.useCallback)(
+    const setRefs = (0, import_react67.useCallback)(
       (node) => {
         assignRefs([ref, dropRef, userRef], node);
       },
       [dropRef]
     );
+    const _experimentalVirtualization = useAppStore(
+      (s) => s._experimentalVirtualization
+    );
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    const isRootAreaZone = (areaId != null ? areaId : rootAreaId) === rootAreaId && depth === 0;
+    const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       El,
       {
         className: `${getClassName25({
@@ -9845,20 +10116,37 @@ var DropZoneEdit = (0, import_react66.forwardRef)(
           "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
-        children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-            DropZoneChildMemo,
-            {
-              zoneCompound,
-              componentId,
-              dragAxis,
-              index: i,
-              collisionAxis,
-              inDroppableZone: targetAccepted
-            },
-            componentId
-          );
-        })
+        children: shouldVirtualizeItems ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          VirtualizedDropZone,
+          {
+            contentIds: contentIdsWithPreview,
+            zoneCompound,
+            renderItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              DropZoneChildMemo,
+              {
+                zoneCompound,
+                componentId: props.componentId,
+                dragAxis,
+                index: props.index,
+                collisionAxis,
+                inDroppableZone: targetAccepted,
+                itemRef: props.measureRef
+              },
+              props.componentId
+            )
+          }
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          DropZoneChildMemo,
+          {
+            zoneCompound,
+            componentId,
+            dragAxis,
+            index: i,
+            collisionAxis,
+            inDroppableZone: targetAccepted
+          },
+          componentId
+        ))
       }
     );
   }
@@ -9869,8 +10157,8 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react66.useMemo)(
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = (0, import_react67.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -9878,7 +10166,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -9888,15 +10176,15 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZoneRender, __spreadValues({}, props));
-var DropZoneRender = (0, import_react66.forwardRef)(
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneRender, __spreadValues({}, props));
+var DropZoneRender = (0, import_react67.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = (0, import_react66.useContext)(dropZoneContext);
+    const ctx = (0, import_react67.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react66.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react67.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react66.useEffect)(() => {
+    (0, import_react67.useEffect)(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -9910,10 +10198,10 @@ var DropZoneRender = (0, import_react66.forwardRef)(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           DropZoneRenderItem,
           {
             config,
@@ -9927,14 +10215,14 @@ var DropZoneRender = (0, import_react66.forwardRef)(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react66.forwardRef)(
+var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZone, __spreadValues({}, props));
+var DropZone = (0, import_react67.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react66.useContext)(dropZoneContext);
+    const ctx = (0, import_react67.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_jsx_runtime68.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_jsx_runtime68.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -9971,17 +10259,6 @@ function throttle(func, limit) {
   };
 }
 
-// lib/get-frame.ts
-init_react_import();
-var getFrame = () => {
-  if (typeof window === "undefined") return;
-  let frameEl = document.querySelector("#preview-frame");
-  if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
-    return frameEl.contentDocument || document;
-  }
-  return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
-};
-
 // lib/global-position.ts
 init_react_import();
 var GlobalPosition = class {
@@ -10310,14 +10587,14 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 var import_state = require("@dnd-kit/state");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react69.createContext)({
+var dragListenerContext = (0, import_react70.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react69.useContext)(dragListenerContext);
-  (0, import_react69.useEffect)(() => {
+  const { setDragListeners } = (0, import_react70.useContext)(dragListenerContext);
+  (0, import_react70.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -10327,8 +10604,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react69.useRef)(null);
-  return (0, import_react69.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react70.useRef)(null);
+  return (0, import_react70.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -10347,10 +10624,11 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = (0, import_react69.useRef)(null);
+  const debouncedParamsRef = (0, import_react70.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react69.useState)(
-    () => (0, import_zustand6.createStore)(() => ({
+  const [zoneStore] = (0, import_react70.useState)(() => {
+    const rootVirtualizers = /* @__PURE__ */ new Map();
+    return (0, import_zustand6.createStore)(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
       areaDepthIndex: {},
@@ -10358,10 +10636,36 @@ var DragDropContextClient = ({
       draggedItem: null,
       previewIndex: {},
       enabledIndex: {},
-      hoveringComponent: null
-    }))
-  );
-  const getChanged2 = (0, import_react69.useCallback)(
+      hoveringComponent: null,
+      registerRootVirtualizer: (zoneCompound, handle) => {
+        rootVirtualizers.set(zoneCompound, handle);
+      },
+      unregisterRootVirtualizer: (zoneCompound) => {
+        rootVirtualizers.delete(zoneCompound);
+      },
+      scrollToComponent: (id) => {
+        const virtualizers = Array.from(rootVirtualizers.values());
+        if (virtualizers.length > 0) {
+          for (const handle of virtualizers) {
+            const index = handle.resolveIndex(id);
+            if (index < 0) {
+              continue;
+            }
+            handle.virtualizer.scrollToIndex(index, {
+              behavior: "auto",
+              // We avoid smooth scroll as this triggers virtualizer renders
+              align: "auto"
+            });
+          }
+        } else {
+          const frame = getFrame();
+          const el = frame == null ? void 0 : frame.querySelector(`[data-puck-component="${id}"]`);
+          el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    }));
+  });
+  const getChanged2 = (0, import_react70.useCallback)(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -10382,7 +10686,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react69.useCallback)(
+  const setDeepestAndCollide = (0, import_react70.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params);
       if (!zoneChanged && !areaChanged) return;
@@ -10406,7 +10710,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -10420,7 +10724,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react69.useState)(() => [
+  const [plugins] = (0, import_react70.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -10468,10 +10772,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react69.useState)({});
-  const dragMode = (0, import_react69.useRef)(null);
-  const initialSelector = (0, import_react69.useRef)(void 0);
-  const nextContextValue = (0, import_react69.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react70.useState)({});
+  const dragMode = (0, import_react70.useRef)(null);
+  const initialSelector = (0, import_react70.useRef)(void 0);
+  const nextContextValue = (0, import_react70.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -10479,15 +10783,15 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-        import_react68.DragDropProvider,
+      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        import_react69.DragDropProvider,
         {
           plugins,
           sensors,
@@ -10508,24 +10812,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: {
@@ -10533,9 +10822,6 @@ var DragDropContextClient = ({
                     isDragging: false
                   }
                 });
-                (_a2 = dragListeners.dragend) == null ? void 0 : _a2.forEach((fn) => {
-                  fn(event, manager);
-                });
                 return;
               }
               if (thisPreview) {
@@ -10548,14 +10834,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({
@@ -10564,7 +10848,7 @@ var DragDropContextClient = ({
                   itemSelector: { index, zone },
                   isDragging: false
                 },
-                recordHistory: true
+                recordHistory: false
               });
               (_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
                 fn(event, manager);
@@ -10720,7 +11004,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-puck-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-puck-dragging", "true");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -10734,12 +11018,12 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
-var import_react71 = require("@dnd-kit/react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react72 = require("@dnd-kit/react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var getClassName26 = get_class_name_factory_default("Drawer", styles_module_default14);
 var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default14);
 var DrawerItemInner = ({
@@ -10749,11 +11033,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react70.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = (0, import_react71.useMemo)(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -10761,9 +11045,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-puck-drawer-item": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DragIcon, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DragIcon, {}) })
       ] }) }) })
     }
   );
@@ -10775,15 +11059,15 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react71.useDraggable)({
+  const { ref } = (0, import_react72.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: getClassName26("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassName26("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DrawerItemInner, { name, label, children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: getClassName26("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: getClassName26("draggable"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName26("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName26("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       DrawerItemInner,
       {
         name,
@@ -10804,7 +11088,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react70.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react71.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -10817,7 +11101,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     DrawerItemDraggable,
     {
       name,
@@ -10844,13 +11128,13 @@ var Drawer = ({
     );
   }
   const id = useSafeId();
-  const { ref } = (0, import_react71.useDroppable)({
+  const { ref } = (0, import_react72.useDroppable)({
     id,
     type: "void",
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "div",
     {
       className: getClassName26(),
@@ -10869,7 +11153,7 @@ init_IconButton2();
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react93 = require("react");
+var import_react94 = require("react");
 init_store();
 
 // components/Puck/components/Fields/index.tsx
@@ -10884,15 +11168,15 @@ var styles_module_default18 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 
 // components/Puck/components/Fields/index.tsx
 init_lib();
-var import_react72 = require("react");
+var import_react73 = require("react");
 init_fields();
 var import_shallow7 = require("zustand/react/shallow");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var getClassName27 = get_class_name_factory_default("PuckFields", styles_module_default18);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
@@ -10953,12 +11237,12 @@ var FieldsChildInner = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = (0, import_react72.useCallback)(createOnChange(fieldName, appStore), [
+  const onChange = (0, import_react73.useCallback)(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
-  const fieldStore = (0, import_react72.useContext)(fieldContextStore.ctx);
-  (0, import_react72.useEffect)(() => {
+  const fieldStore = (0, import_react73.useContext)(fieldContextStore.ctx);
+  (0, import_react73.useEffect)(() => {
     return appStore.subscribe(
       (s) => {
         var _a;
@@ -10972,7 +11256,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName27("field"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     AutoFieldPrivate,
     {
       field,
@@ -10985,14 +11269,14 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = (0, import_react72.useMemo)(() => {
+  const initialValue = (0, import_react73.useMemo)(() => {
     var _a;
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(FieldsChildInner, { fieldName }) });
 };
-var FieldsChildMemo = (0, import_react72.memo)(FieldsChild);
+var FieldsChildMemo = (0, import_react73.memo)(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
   const overrides = useAppStore((s) => s.overrides);
   const componentResolving = useAppStore((s) => {
@@ -11017,8 +11301,8 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react72.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  const Wrapper = (0, import_react73.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "form",
     {
       className: getClassName27({ wrapFields }),
@@ -11026,20 +11310,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: getClassName27("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName27("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Loader, { size: 16 }) }) })
       ]
     }
   );
 };
-var Fields = (0, import_react72.memo)(FieldsInternal);
+var Fields = (0, import_react73.memo)(FieldsInternal);
 
 // components/Puck/components/Components/index.tsx
 init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-var import_react74 = require("react");
+var import_react75 = require("react");
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -11050,10 +11334,10 @@ var styles_module_default19 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 init_get_class_name_factory();
-var import_react73 = require("react");
+var import_react74 = require("react");
 init_store();
 init_lucide_react();
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default19);
 var ComponentListItem = ({
   name,
@@ -11066,14 +11350,14 @@ var ComponentListItem = ({
       type: name
     }).insert
   );
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (overrides.componentItem) {
       console.warn(
         "The `componentItem` override has been deprecated and renamed to `drawerItem`"
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -11084,8 +11368,8 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "button",
       {
         type: "button",
@@ -11099,14 +11383,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -11121,12 +11405,12 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
 init_store();
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var useComponentList = () => {
-  const [componentList, setComponentList] = (0, import_react74.useState)();
+  const [componentList, setComponentList] = (0, import_react75.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -11142,7 +11426,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             ComponentList,
             {
               id: categoryKey,
@@ -11150,7 +11434,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -11170,7 +11454,7 @@ var useComponentList = () => {
       );
       if (remainingComponents.length > 0 && !((_a = uiComponentList.other) == null ? void 0 : _a.components) && ((_b = uiComponentList.other) == null ? void 0 : _b.visible) !== false) {
         _componentList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             ComponentList,
             {
               id: "other",
@@ -11178,7 +11462,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -11201,12 +11485,12 @@ var useComponentList = () => {
 
 // components/Puck/components/Components/index.tsx
 init_store();
-var import_react75 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = (0, import_react75.useMemo)(() => {
+  const Wrapper = (0, import_react76.useMemo)(() => {
     if (overrides.components) {
       console.warn(
         "The `components` override has been deprecated and renamed to `drawer`"
@@ -11214,21 +11498,21 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react77 = require("react");
+var import_react78 = require("react");
 init_store();
 
 // components/AutoFrame/index.tsx
 init_react_import();
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_object_hash = __toESM(require("object-hash"));
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -11278,7 +11562,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -11443,10 +11727,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children });
 };
-var autoFrameContext = (0, import_react76.createContext)({});
-var useFrame = () => (0, import_react76.useContext)(autoFrameContext);
+var autoFrameContext = (0, import_react77.createContext)({});
+var useFrame = () => (0, import_react77.useContext)(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -11467,11 +11751,11 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = (0, import_react76.useState)(false);
-  const [ctx, setCtx] = (0, import_react76.useState)({});
-  const [mountTarget, setMountTarget] = (0, import_react76.useState)();
-  const [stylesLoaded, setStylesLoaded] = (0, import_react76.useState)(false);
-  (0, import_react76.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react77.useState)(false);
+  const [ctx, setCtx] = (0, import_react77.useState)({});
+  const [mountTarget, setMountTarget] = (0, import_react77.useState)();
+  const [stylesLoaded, setStylesLoaded] = (0, import_react77.useState)(false);
+  (0, import_react77.useEffect)(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -11490,7 +11774,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -11500,7 +11784,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         CopyHostStyles,
         {
           debug,
@@ -11520,11 +11804,11 @@ var styles_module_default20 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPrev
 
 // components/Puck/components/Preview/index.tsx
 init_lib();
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var getClassName29 = get_class_name_factory_default("PuckPreview", styles_module_default20);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -11573,7 +11857,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react77.useCallback)(
+  const Page = (0, import_react78.useCallback)(
     (pageProps) => {
       var _a, _b, _c, _d;
       const propsWithSlots = useSlots(
@@ -11587,15 +11871,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
       );
       return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
         id: "puck-root"
-      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: propsWithSlots.children });
     },
     [config]
   );
-  const Frame = (0, import_react77.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react78.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react77.useRef)(null);
+  const ref = (0, import_react78.useRef)(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -11605,15 +11889,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react77.useEffect)(() => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Render, { data: renderData, config, metadata });
+  (0, import_react78.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       className: getClassName29(),
@@ -11625,7 +11909,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -11638,14 +11922,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "div",
         {
           id: "preview-frame",
@@ -11671,103 +11955,154 @@ var styles_module_default21 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zo
 
 // components/LayerTree/index.tsx
 init_get_class_name_factory();
-
-// lib/scroll-into-view.ts
-init_react_import();
-var scrollIntoView = (el) => {
-  const oldStyle = __spreadValues({}, el.style);
-  el.style.scrollMargin = "256px";
-  if (el) {
-    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
-    el.style.scrollMargin = oldStyle.scrollMargin || "";
-  }
-};
-
-// components/LayerTree/index.tsx
 init_lucide_react();
 init_root_droppable_id();
-var import_react78 = require("react");
-
-// lib/on-scroll-end.ts
-init_react_import();
-var onScrollEnd = (frame, cb) => {
-  let scrollTimeout;
-  const callback = function() {
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function() {
-      cb();
-      frame == null ? void 0 : frame.removeEventListener("scroll", callback);
-    }, 50);
-  };
-  frame == null ? void 0 : frame.addEventListener("scroll", callback);
-  setTimeout(() => {
-    if (!scrollTimeout) {
-      cb();
-    }
-  }, 50);
-};
-
-// components/LayerTree/index.tsx
+var import_react79 = require("react");
 init_store();
-var import_shallow8 = require("zustand/react/shallow");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_react_virtual2 = require("@tanstack/react-virtual");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default21);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
-var Layer = ({
-  index,
+var DEFAULT_LAYER_ROW_HEIGHT = 32;
+var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
+var MIN_VIRTUALIZED_LAYER_COUNT = 25;
+var measuredRowHeights = /* @__PURE__ */ new Map();
+var getZonesByParent = (zones) => {
+  return Object.keys(zones).reduce((acc, zone) => {
+    const [parentId] = zone.split(":");
+    acc[parentId] = [...acc[parentId] || [], zone];
+    return acc;
+  }, {});
+};
+var getZoneLabel = (zoneCompound, nodes, config, label) => {
+  var _a, _b, _c, _d;
+  if (label !== void 0) {
+    return label;
+  }
+  const [componentId, slotId] = zoneCompound.split(":");
+  if (!slotId) {
+    return;
+  }
+  const componentType = (_a = nodes[componentId]) == null ? void 0 : _a.data.type;
+  const configForComponent = componentType && componentType !== rootAreaId ? config.components[componentType] : config.root;
+  return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
+};
+var buildLayerNode = ({
+  config,
   itemId,
-  zoneCompound
+  index,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent
 }) => {
+  var _a, _b, _c;
+  const nodeData = nodes[itemId];
+  const componentType = ((_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) || "Component";
+  const label = (_c = (_b = config.components[componentType]) == null ? void 0 : _b.label) != null ? _c : componentType;
+  const childZoneCompounds = zonesByParent[itemId] || [];
+  return {
+    childZones: childZoneCompounds.map(
+      (childZoneCompound) => buildLayerTree({
+        config,
+        nodes,
+        zoneCompound: childZoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    componentType,
+    index,
+    itemId,
+    label,
+    zoneCompound
+  };
+};
+var buildLayerTree = ({
+  config,
+  label,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent = getZonesByParent(zones)
+}) => {
+  var _a, _b;
+  const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
+  return {
+    items: contentIds.map(
+      (itemId, index) => buildLayerNode({
+        config,
+        itemId,
+        index,
+        nodes,
+        zoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    label: getZoneLabel(zoneCompound, nodes, config, label),
+    zoneCompound
+  };
+};
+var getEstimatedRowHeight = (itemId) => {
   var _a;
-  const config = useAppStore((s) => s.config);
-  const itemSelector = useAppStore((s) => s.state.ui.itemSelector);
+  return (_a = measuredRowHeights.get(itemId)) != null ? _a : DEFAULT_LAYER_ROW_HEIGHT;
+};
+var cacheMeasuredRowHeight = (itemId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredRowHeights.set(itemId, height);
+};
+var getScrollParent = (el) => {
+  var _a;
+  let current = (_a = el == null ? void 0 : el.parentElement) != null ? _a : null;
+  while (current) {
+    const { overflow, overflowY } = getComputedStyle(current);
+    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+var Layer = (0, import_react79.forwardRef)(function Layer2({
+  childIsSelected,
+  dataIndex,
+  depth,
+  isSelected,
+  node,
+  selectedId,
+  selectedPathIds
+}, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = (0, import_react78.useCallback)(
-    (itemSelector2) => {
-      dispatch({ type: "setUi", ui: { itemSelector: itemSelector2 } });
-    },
-    [dispatch]
-  );
-  const selecedItemId = useAppStore((s) => {
-    var _a2;
-    return (_a2 = s.selectedItem) == null ? void 0 : _a2.props.id;
-  });
-  const isSelected = selecedItemId === itemId || itemSelector && itemSelector.zone === rootDroppableId && !zoneCompound;
-  const nodeData = useAppStore((s) => s.state.indexes.nodes[itemId]);
-  const zonesForItem = useAppStore(
-    (0, import_shallow8.useShallow)(
-      (s) => Object.keys(s.state.indexes.zones).filter(
-        (z) => z.split(":")[0] === itemId
-      )
-    )
-  );
-  const containsZone = zonesForItem.length > 0;
-  const zoneStore = (0, import_react78.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react79.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
-    (s) => s.hoveringComponent === itemId
+    (s) => s.hoveringComponent === node.itemId
   );
-  const childIsSelected = useAppStore((s) => {
-    var _a2, _b;
-    const selectedData = s.state.indexes.nodes[(_a2 = s.selectedItem) == null ? void 0 : _a2.props.id];
-    return (_b = selectedData == null ? void 0 : selectedData.path.some((candidate) => {
-      const [candidateId] = candidate.split(":");
-      return candidateId === itemId;
-    })) != null ? _b : false;
-  });
-  const componentConfig = config.components[nodeData.data.type];
-  const label = (_a = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _a : nodeData.data.type.toString();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  const containsZone = node.childZones.length > 0;
+  const setItemSelector = (0, import_react79.useCallback)(
+    (itemSelector) => {
+      dispatch({ type: "setUi", ui: { itemSelector } });
+    },
+    [dispatch]
+  );
+  const shouldRenderChildren = isSelected || childIsSelected;
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     "li",
     {
+      ref,
       className: getClassNameLayer({
-        isSelected,
-        isHovering,
+        childIsSelected,
         containsZone,
-        childIsSelected
+        isHovering,
+        isSelected
       }),
+      "data-index": dataIndex,
+      "data-puck-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
           "button",
           {
             type: "button",
@@ -11777,100 +12112,208 @@ var Layer = ({
                 setItemSelector(null);
                 return;
               }
-              const frame = getFrame();
-              const el = frame == null ? void 0 : frame.querySelector(
-                `[data-puck-component="${itemId}"]`
-              );
-              if (!el) {
-                setItemSelector({
-                  index,
-                  zone: zoneCompound
-                });
-                return;
-              }
-              scrollIntoView(el);
-              onScrollEnd(frame, () => {
-                setItemSelector({
-                  index,
-                  zone: zoneCompound
-                });
+              setItemSelector({
+                index: node.index,
+                zone: node.zoneCompound
               });
+              zoneStore.getState().scrollToComponent(node.itemId);
             },
             onMouseEnter: (e) => {
               e.stopPropagation();
-              zoneStore.setState({ hoveringComponent: itemId });
+              zoneStore.setState({ hoveringComponent: node.itemId });
             },
             onMouseLeave: (e) => {
               e.stopPropagation();
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              containsZone && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassNameLayer("name"), children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassNameLayer("icon"), children: node.componentType === "Text" || node.componentType === "Heading" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Type, { size: "16" }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "div",
+          {
+            className: getClassNameLayer("zones"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              LayerTreeZone,
+              {
+                depth: depth + 1,
+                selectedId,
+                selectedPathIds,
+                tree: childZone
+              }
+            )
+          },
+          childZone.zoneCompound
+        ))
       ]
     }
   );
-};
-var LayerTree = ({
-  label: _label,
-  zoneCompound
+});
+var LayerTreeZone = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
 }) => {
-  const label = useAppStore((s) => {
-    var _a, _b, _c, _d;
-    if (_label) return _label;
-    if (zoneCompound === rootDroppableId) return;
-    const [componentId, slotId] = zoneCompound.split(":");
-    const componentType = (_a = s.state.indexes.nodes[componentId]) == null ? void 0 : _a.data.type;
-    const configForComponent = componentType && componentType !== rootAreaId ? s.config.components[componentType] : s.config.root;
-    return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
-  });
-  const contentIds = useAppStore(
-    (0, import_shallow8.useShallow)(
-      (s) => {
-        var _a, _b;
-        return zoneCompound ? (_b = (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [] : [];
+  const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    tree.label && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Layers, { size: "16" }) }),
+      tree.label
+    ] }),
+    shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      VirtualizedLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      StaticLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
       }
     )
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getClassName30("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName30("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Layers, { size: "16" }) }),
-      label
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("ul", { className: getClassName30(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
-      contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          Layer,
+  ] });
+};
+var StaticLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("ul", { className: getClassName30(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    tree.items.map((node) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      Layer,
+      {
+        childIsSelected: selectedPathIds.has(node.itemId),
+        depth,
+        isSelected: selectedId === node.itemId,
+        node,
+        selectedId,
+        selectedPathIds
+      },
+      node.itemId
+    ))
+  ] });
+};
+var VirtualizedLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const listRef = (0, import_react79.useRef)(null);
+  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+    count: tree.items.length,
+    estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
+    getItemKey: (index) => tree.items[index].itemId,
+    getScrollElement: () => getScrollParent(listRef.current),
+    overscan: LAYER_TREE_VIRTUALIZATION_OVERSCAN,
+    measureElement: (element) => {
+      const height = Math.ceil(element.getBoundingClientRect().height);
+      const itemId = element.dataset.puckLayerTreeId;
+      if (itemId) {
+        cacheMeasuredRowHeight(itemId, height);
+      }
+      return height || DEFAULT_LAYER_ROW_HEIGHT;
+    }
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const renderedItems = [];
+  let previousEnd = 0;
+  let previousIndex = -1;
+  virtualItems.forEach((virtualItem) => {
+    const node = tree.items[virtualItem.index];
+    const gapSize = Math.max(virtualItem.start - previousEnd, 0);
+    if (gapSize > 0) {
+      renderedItems.push(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "li",
           {
-            index: i,
-            itemId,
-            zoneCompound
+            "aria-hidden": "true",
+            style: { height: `${gapSize}px` }
           },
-          itemId
-        );
-      })
-    ] })
+          `gap:${tree.zoneCompound}:${previousIndex}:${virtualItem.index}`
+        )
+      );
+    }
+    renderedItems.push(
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        Layer,
+        {
+          childIsSelected: selectedPathIds.has(node.itemId),
+          dataIndex: virtualItem.index,
+          depth,
+          isSelected: selectedId === node.itemId,
+          node,
+          ref: virtualizer.measureElement,
+          selectedId,
+          selectedPathIds
+        },
+        node.itemId
+      )
+    );
+    previousEnd = virtualItem.end;
+    previousIndex = virtualItem.index;
+  });
+  const trailingGap = Math.max(totalSize - previousEnd, 0);
+  if (trailingGap > 0) {
+    renderedItems.push(
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        "li",
+        {
+          "aria-hidden": "true",
+          style: { height: `${trailingGap}px` }
+        },
+        `gap:${tree.zoneCompound}:${previousIndex}:end`
+      )
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("ul", { className: getClassName30(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    renderedItems
   ] });
 };
+var LayerTree = ({
+  selectedId,
+  selectedPathIds,
+  trees
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: trees.map((tree) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    LayerTreeZone,
+    {
+      depth: 0,
+      selectedId,
+      selectedPathIds,
+      tree
+    },
+    tree.zoneCompound
+  )) });
+};
 
 // components/Puck/components/Outline/index.tsx
 init_store();
-var import_react79 = require("react");
+var import_react80 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -11881,22 +12324,48 @@ var findZonesForArea = (state, area) => {
 };
 
 // components/Puck/components/Outline/index.tsx
-var import_shallow9 = require("zustand/react/shallow");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_shallow8 = require("zustand/react/shallow");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
+  const config = useAppStore((s) => s.config);
+  const nodes = useAppStore((s) => s.state.indexes.nodes);
+  const zones = useAppStore((s) => s.state.indexes.zones);
+  const selectedId = useAppStore((s) => {
+    var _a;
+    return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) || null;
+  });
   const rootZones = useAppStore(
-    (0, import_shallow9.useShallow)((s) => findZonesForArea(s.state, "root"))
+    (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
+  );
+  const selectedPathIds = (0, import_react80.useMemo)(() => {
+    var _a;
+    const selectedPath = selectedId ? (_a = nodes[selectedId]) == null ? void 0 : _a.path : null;
+    return new Set(
+      (selectedPath == null ? void 0 : selectedPath.map((candidate) => candidate.split(":")[0]).filter(Boolean)) || []
+    );
+  }, [nodes, selectedId]);
+  const trees = (0, import_react80.useMemo)(
+    () => rootZones.map(
+      (zoneCompound) => buildLayerTree({
+        config,
+        label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
+        nodes,
+        zoneCompound,
+        zones
+      })
+    ),
+    [config, nodes, rootZones, zones]
   );
-  const Wrapper = (0, import_react79.useMemo)(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  const Wrapper = (0, import_react80.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     LayerTree,
     {
-      label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
-      zoneCompound
-    },
-    zoneCompound
-  )) });
+      selectedId,
+      selectedPathIds,
+      trees
+    }
+  ) });
 };
 
 // components/Puck/index.tsx
@@ -11904,7 +12373,7 @@ init_default_viewports();
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -11946,7 +12415,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react80.useMemo)(() => {
+  return (0, import_react81.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -11957,7 +12426,7 @@ init_permissions();
 
 // lib/use-puck.ts
 init_react_import();
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_zustand7 = require("zustand");
 init_make_state_public();
 init_get_item();
@@ -12067,7 +12536,7 @@ var generateUsePuck = (store, getState) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react81.createContext)(
+var UsePuckStoreContext = (0, import_react82.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -12081,7 +12550,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react81.useState)(
+  const [usePuckStore] = (0, import_react82.useState)(
     () => (0, import_zustand7.createStore)(
       () => generateUsePuck(
         convertToPickedStore(appStore.getState()),
@@ -12089,7 +12558,7 @@ var useRegisterUsePuckStore = (appStore) => {
       )
     )
   );
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -12101,7 +12570,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react81.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -12113,7 +12582,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -12121,7 +12590,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react81.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react82.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -12136,7 +12605,7 @@ init_to_component();
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
-var import_react92 = require("react");
+var import_react93 = require("react");
 init_lib();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
@@ -12145,14 +12614,14 @@ var styles_module_default22 = { "Puck": "_Puck_1dd16_19", "Puck-portal": "_Puck-
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react82 = require("react");
+var import_react83 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react82.useState)();
-  (0, import_react82.useEffect)(() => {
+  const [el, setEl] = (0, import_react83.useState)();
+  (0, import_react83.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -12175,20 +12644,20 @@ init_store();
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children });
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children });
 
 // components/Puck/components/Layout/index.tsx
 init_use_hotkey();
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react83 = require("react");
+var import_react84 = require("react");
 init_use_hotkey();
 init_store();
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react83.useCallback)(() => {
+  const toggleInteractive = (0, import_react84.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -12203,7 +12672,7 @@ var usePreviewModeHotkeys = () => {
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react84 = require("react");
+var import_react85 = require("react");
 init_store();
 init_lucide_react();
 init_IconButton();
@@ -12220,7 +12689,7 @@ var styles_module_default23 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpe
 
 // components/MenuBar/index.tsx
 init_store();
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("MenuBar", styles_module_default23);
 function MenuBar({
   menuOpen = false,
@@ -12231,7 +12700,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "div",
     {
       className: getClassName31({ menuOpen }),
@@ -12245,30 +12714,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getClassName31("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: getClassName31("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName31("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName31("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Undo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Redo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -12282,7 +12751,7 @@ init_react_import();
 var styles_module_default24 = { "PuckHeader": "_PuckHeader_63pti_1", "PuckHeader--hidePlugins": "_PuckHeader--hidePlugins_63pti_15", "PuckHeader-inner": "_PuckHeader-inner_63pti_20", "PuckHeader-toggle": "_PuckHeader-toggle_63pti_40", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_63pti_47", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_63pti_47", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_63pti_48", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_63pti_48", "PuckHeader-title": "_PuckHeader-title_63pti_64", "PuckHeader-path": "_PuckHeader-path_63pti_68", "PuckHeader-tools": "_PuckHeader-tools_63pti_75", "PuckHeader-menuButton": "_PuckHeader-menuButton_63pti_81", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_63pti_86" };
 
 // components/Puck/components/Header/index.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var getClassName32 = get_class_name_factory_default("PuckHeader", styles_module_default24);
 var HeaderInner = ({
   hidePlugins
@@ -12297,7 +12766,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react84.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react85.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -12306,13 +12775,13 @@ var HeaderInner = ({
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react84.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react85.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -12320,7 +12789,7 @@ var HeaderInner = ({
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -12332,7 +12801,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react84.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react85.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -12342,7 +12811,7 @@ var HeaderInner = ({
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react84.useCallback)(
+  const toggleSidebars = (0, import_react85.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -12356,21 +12825,21 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      actions: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "header",
         {
           className: getClassName32({
@@ -12378,9 +12847,9 @@ var HeaderInner = ({
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName32("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName32("toggle"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName32("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName32("inner"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName32("toggle"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName32("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12388,10 +12857,10 @@ var HeaderInner = ({
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName32("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName32("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12399,19 +12868,19 @@ var HeaderInner = ({
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName32("title"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Heading7, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName32("title"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Heading7, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+              headerPath && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("code", { className: getClassName32("path"), children: headerPath })
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("code", { className: getClassName32("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName32("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName32("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName32("tools"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName32("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -12419,23 +12888,23 @@ var HeaderInner = ({
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -12449,7 +12918,7 @@ var HeaderInner = ({
     }
   );
 };
-var Header = (0, import_react84.memo)(HeaderInner);
+var Header = (0, import_react85.memo)(HeaderInner);
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -12475,7 +12944,7 @@ init_lucide_react();
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react85 = require("react");
+var import_react86 = require("react");
 init_store();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
@@ -12488,7 +12957,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return (0, import_react85.useMemo)(() => {
+  return (0, import_react86.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c, _d;
       const [componentId] = zoneCompound.split(":");
@@ -12520,7 +12989,7 @@ var useBreadcrumbs = (renderCount) => {
 
 // components/Breadcrumbs/index.tsx
 init_store();
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var getClassName33 = get_class_name_factory_default("Breadcrumbs", styles_module_default26);
 var Breadcrumbs = ({
   children,
@@ -12528,9 +12997,9 @@ var Breadcrumbs = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName33(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName33("breadcrumb"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName33(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName33("breadcrumb"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "button",
         {
           type: "button",
@@ -12539,14 +13008,14 @@ var Breadcrumbs = ({
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronRight, { size: 16 })
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
 };
 
 // components/SidebarSection/index.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var getClassName34 = get_class_name_factory_default("SidebarSection", styles_module_default25);
 var SidebarSection = ({
   children,
@@ -12556,20 +13025,20 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName34({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName34("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Breadcrumbs, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getClassName34({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getClassName34("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Breadcrumbs, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName34("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("content"), children }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Loader, { size: 32 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName34("content"), children }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName34("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Loader, { size: 32 }) })
   ] });
 };
 
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 init_css_box_model_esm();
-var import_react88 = require("react");
+var import_react89 = require("react");
 init_store();
 
 // components/ViewportControls/index.tsx
@@ -12577,7 +13046,7 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store();
-var import_react86 = require("react");
+var import_react87 = require("react");
 init_lib();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
@@ -12585,12 +13054,12 @@ init_react_import();
 var styles_module_default27 = { "ViewportControls": "_ViewportControls_e3unb_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_e3unb_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_e3unb_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_e3unb_38", "ViewportControls-actions": "_ViewportControls-actions_e3unb_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_e3unb_46", "ViewportControls-divider": "_ViewportControls-divider_e3unb_75", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_e3unb_81", "ViewportControls-zoom": "_ViewportControls-zoom_e3unb_81", "ViewportButton-inner": "_ViewportButton-inner_e3unb_111", "ViewportButton--isActive": "_ViewportButton--isActive_e3unb_119" };
 
 // components/ViewportControls/index.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Expand, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Expand, { size: 16 })
 };
 var getClassName35 = get_class_name_factory_default("ViewportControls", styles_module_default27);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default27);
@@ -12601,7 +13070,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     IconButton,
     {
       type: "button",
@@ -12609,7 +13078,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -12635,7 +13104,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react86.useMemo)(
+  const zoomOptions = (0, import_react87.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -12647,21 +13116,21 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  const [activeViewport, setActiveViewport] = (0, import_react86.useState)(
+  const [activeViewport, setActiveViewport] = (0, import_react87.useState)(
     uiViewports.current.width
   );
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
-  const [isExpanded, setIsExpanded] = (0, import_react86.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  const [isExpanded, setIsExpanded] = (0, import_react87.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       className: getClassName35({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName35("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getClassName35("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             ActionButton,
             {
               title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
@@ -12674,8 +13143,8 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName35("divider") }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("divider") }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             ActionButton,
             {
               title: "Zoom viewport out",
@@ -12689,10 +13158,10 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             ActionButton,
             {
               title: "Zoom viewport in",
@@ -12706,12 +13175,12 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: getClassName35("zoom"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: getClassName35("divider") }),
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("zoom"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("divider") }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               "select",
               {
                 className: getClassName35("zoomSelect"),
@@ -12722,7 +13191,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+                children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   "option",
                   {
                     value: option.value,
@@ -12734,13 +13203,13 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           "button",
           {
             className: getClassName35("toggleButton"),
             title: "Toggle viewport menu",
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 16 })
           }
         )
       ]
@@ -12755,27 +13224,27 @@ var styles_module_default28 = { "PuckCanvas": "_PuckCanvas_t6s9b_1", "PuckCanvas
 // components/Puck/components/Canvas/index.tsx
 init_lib();
 init_Loader();
-var import_shallow10 = require("zustand/react/shallow");
+var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react87 = require("react");
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var FrameContext = (0, import_react87.createContext)(null);
+var import_react88 = require("react");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var FrameContext = (0, import_react88.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react87.useRef)(null);
-  const value = (0, import_react87.useMemo)(
+  const frameRef = (0, import_react88.useRef)(null);
+  const value = (0, import_react88.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react87.useContext)(FrameContext);
+  const context = (0, import_react88.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -12784,7 +13253,7 @@ var useCanvasFrame = () => {
 
 // components/Puck/components/Canvas/index.tsx
 init_default_viewports();
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var getClassName36 = get_class_name_factory_default("PuckCanvas", styles_module_default28);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -12792,11 +13261,7 @@ var Canvas = () => {
   var _a;
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const {
-    _experimentalFullScreenCanvas,
-    viewports: viewportOptions = defaultViewports,
-    ui: uiProp
-  } = usePropsContext();
+  const { viewports: viewportOptions = defaultViewports, ui: uiProp } = usePropsContext();
   const {
     dispatch,
     overrides,
@@ -12804,16 +13269,18 @@ var Canvas = () => {
     zoomConfig,
     setZoomConfig,
     status,
-    iframe
+    iframe,
+    _experimentalFullScreenCanvas
   } = useAppStore(
-    (0, import_shallow10.useShallow)((s) => ({
+    (0, import_shallow9.useShallow)((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
       zoomConfig: s.zoomConfig,
       setZoomConfig: s.setZoomConfig,
       status: s.status,
-      iframe: s.iframe
+      iframe: s.iframe,
+      _experimentalFullScreenCanvas: s._experimentalFullScreenCanvas
     }))
   );
   const {
@@ -12823,7 +13290,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   } = useAppStore(
-    (0, import_shallow10.useShallow)((s) => ({
+    (0, import_shallow9.useShallow)((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
@@ -12831,17 +13298,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = (0, import_react88.useState)(false);
-  const isResizingRef = (0, import_react88.useRef)(false);
-  const defaultRender = (0, import_react88.useMemo)(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, { children });
+  const [showTransition, setShowTransition] = (0, import_react89.useState)(false);
+  const isResizingRef = (0, import_react89.useRef)(false);
+  const defaultRender = (0, import_react89.useMemo)(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = (0, import_react88.useMemo)(
+  const CustomPreview = (0, import_react89.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = (0, import_react88.useCallback)(() => {
+  const getFrameDimensions = (0, import_react89.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -12849,7 +13316,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -12859,7 +13326,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   ]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -12867,12 +13334,12 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports]);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -12884,14 +13351,14 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = (0, import_react88.useState)(false);
-  (0, import_react88.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react89.useState)(false);
+  (0, import_react89.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     var _a2, _b;
     if (typeof window === "undefined") return;
     if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
@@ -12942,7 +13409,7 @@ var Canvas = () => {
     appStoreApi,
     (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "div",
     {
       className: getClassName36({
@@ -12956,12 +13423,12 @@ var Canvas = () => {
           dispatch({
             type: "setUi",
             ui: { itemSelector: null },
-            recordHistory: true
+            recordHistory: false
           });
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getClassName36("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName36("controls"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           ViewportControls,
           {
             fullScreen: _experimentalFullScreenCanvas,
@@ -12991,8 +13458,8 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName36("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName36("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             "div",
             {
               className: getClassName36("root"),
@@ -13009,10 +13476,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Preview2, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getClassName36("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Loader, { size: 24 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName36("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -13021,15 +13488,15 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react89 = require("react");
+var import_react90 = require("react");
 init_store();
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react89.useState)(null);
-  const sidebarRef = (0, import_react89.useRef)(null);
+  const [width, setWidth] = (0, import_react90.useState)(null);
+  const sidebarRef = (0, import_react90.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -13054,12 +13521,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react89.useCallback)(
+  const handleResizeEnd = (0, import_react90.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -13106,7 +13573,7 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react90 = require("react");
+var import_react91 = require("react");
 init_get_class_name_factory();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
@@ -13115,7 +13582,7 @@ var styles_module_default29 = { "ResizeHandle": "_ResizeHandle_144bf_2", "Resize
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_lib();
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var getClassName37 = get_class_name_factory_default("ResizeHandle", styles_module_default29);
 var ResizeHandle = ({
   position,
@@ -13125,11 +13592,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react90.useRef)(null);
-  const isDragging = (0, import_react90.useRef)(false);
-  const startX = (0, import_react90.useRef)(0);
-  const startWidth = (0, import_react90.useRef)(0);
-  const handleMouseMove = (0, import_react90.useCallback)(
+  const handleRef = (0, import_react91.useRef)(null);
+  const isDragging = (0, import_react91.useRef)(false);
+  const startX = (0, import_react91.useRef)(0);
+  const startWidth = (0, import_react91.useRef)(0);
+  const handleMouseMove = (0, import_react91.useCallback)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -13140,7 +13607,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react90.useCallback)(() => {
+  const handleMouseUp = (0, import_react91.useCallback)(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -13156,7 +13623,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = (0, import_react90.useCallback)(
+  const handleMouseDown = (0, import_react91.useCallback)(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -13174,7 +13641,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "div",
     {
       ref: handleRef,
@@ -13192,7 +13659,7 @@ init_react_import();
 var styles_module_default30 = { "Sidebar": "_Sidebar_o396p_1", "Sidebar--isVisible": "_Sidebar--isVisible_o396p_9", "Sidebar--left": "_Sidebar--left_o396p_13", "Sidebar--right": "_Sidebar--right_o396p_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_o396p_37" };
 
 // components/Puck/components/Sidebar/index.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var getClassName38 = get_class_name_factory_default("Sidebar", styles_module_default30);
 var Sidebar = ({
   position,
@@ -13202,8 +13669,8 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "div",
       {
         ref: sidebarRef,
@@ -13211,7 +13678,7 @@ var Sidebar = ({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: `${getClassName38("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: `${getClassName38("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       ResizeHandle,
       {
         position,
@@ -13225,7 +13692,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react91 = require("react");
+var import_react92 = require("react");
 init_use_hotkey();
 init_store();
 var isElementVisible = (element) => {
@@ -13262,7 +13729,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react91.useCallback)(
+  const deleteSelectedComponent = (0, import_react92.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -13295,7 +13762,7 @@ var styles_module_default31 = { "Nav": "_Nav_1tvxq_1", "Nav-list": "_Nav-list_1t
 
 // components/Puck/components/Nav/index.tsx
 init_lib();
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var getClassName39 = get_class_name_factory_default("Nav", styles_module_default31);
 var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default31);
 var MenuItem = ({
@@ -13306,7 +13773,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "li",
     {
       className: getClassNameItem3({
@@ -13314,9 +13781,9 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
+      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -13325,9 +13792,9 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("nav", { className: getClassName39(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("ul", { className: getClassName39("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(MenuItem, __spreadValues({}, item), key)) }),
-    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName39("mobileActions"), children: mobileActions })
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("nav", { className: getClassName39(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ul", { className: getClassName39("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(MenuItem, __spreadValues({}, item), key)) }),
+    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName39("mobileActions"), children: mobileActions })
   ] });
 };
 
@@ -13345,13 +13812,13 @@ var styles_module_default32 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
 
 // plugins/blocks/index.tsx
 init_lib();
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var getClassName40 = get_class_name_factory_default("BlocksPlugin", styles_module_default32);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Hammer, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Components, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Hammer, {})
 });
 
 // plugins/outline/index.tsx
@@ -13364,13 +13831,13 @@ var styles_module_default33 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
 init_lib();
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var getClassName41 = get_class_name_factory_default("OutlinePlugin", styles_module_default33);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Outline, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Layers, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Outline, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Layers, {})
 });
 
 // plugins/fields/index.tsx
@@ -13384,7 +13851,7 @@ var styles_module_default34 = { "FieldsPlugin": "_FieldsPlugin_nd930_1", "Fields
 
 // plugins/fields/index.tsx
 init_lib();
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default34);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
@@ -13397,16 +13864,16 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName42(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Fields, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName42(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Puck/components/Layout/index.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var getClassName43 = get_class_name_factory_default("Puck", styles_module_default22);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default22);
 var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default22);
@@ -13417,14 +13884,14 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -13434,7 +13901,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react92.useMemo)(
+  const iframe = (0, import_react93.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -13460,7 +13927,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -13484,17 +13951,17 @@ var Layout = ({ children }) => {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react92.useMemo)(
+  const CustomPuck = (0, import_react93.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react92.useState)(false);
-  (0, import_react92.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react93.useState)(false);
+  (0, import_react93.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -13517,12 +13984,12 @@ var Layout = ({ children }) => {
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react92.useState)("toggle");
-  const hasLegacySideBarPlugin = (0, import_react92.useMemo)(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react93.useState)("toggle");
+  const hasLegacySideBarPlugin = (0, import_react93.useMemo)(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = (0, import_react92.useMemo)(() => {
+  const pluginItems = (0, import_react93.useMemo)(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
@@ -13541,7 +14008,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -13569,7 +14036,7 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
@@ -13582,7 +14049,7 @@ var Layout = ({ children }) => {
       return (_a = s.state.ui.mobilePanelExpanded) != null ? _a : false;
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "div",
     {
       className: `Puck ${getClassName43({
@@ -13591,7 +14058,7 @@ var Layout = ({ children }) => {
       id: instanceId,
       style: { height },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CustomPuck, { children: children || /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           "div",
           {
             className: getLayoutClassName({
@@ -13603,18 +14070,18 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                     Nav,
                     {
                       items: pluginItems,
-                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                         IconButton,
                         {
                           type: "button",
@@ -13624,12 +14091,12 @@ var Layout = ({ children }) => {
                               mobilePanelExpanded: !mobilePanelExpanded
                             });
                           },
-                          children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Maximize2, { size: 21 })
+                          children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Maximize2, { size: 21 })
                         }
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                     Sidebar,
                     {
                       position: "left",
@@ -13638,20 +14105,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
+                            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                     Sidebar,
                     {
                       position: "right",
@@ -13659,7 +14126,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBar, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldSideBar, {})
                     }
                   )
                 ]
@@ -13667,19 +14134,19 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "puck-portal-root", className: getClassName43("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { id: "puck-portal-root", className: getClassName43("portal") })
       ]
     }
   );
 };
 
 // components/Puck/index.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var propsContext = (0, import_react93.createContext)({});
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var propsContext = (0, import_react94.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react93.useContext)(propsContext);
+var usePropsContext = () => (0, import_react94.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -13694,16 +14161,18 @@ function PuckProvider({ children }) {
     initialHistory: _initialHistory,
     metadata,
     onAction,
-    fieldTransforms
+    fieldTransforms,
+    _experimentalFullScreenCanvas,
+    _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react93.useMemo)(
+  const iframe = (0, import_react94.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react93.useState)(() => {
+  const [generatedAppState] = (0, import_react94.useState)(() => {
     var _a, _b, _c;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -13743,7 +14212,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react93.useState)(
+  const [blendedHistories] = (0, import_react94.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -13757,7 +14226,7 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react93.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react94.useMemo)(() => {
     if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
       return _initialHistory == null ? void 0 : _initialHistory.index;
     }
@@ -13768,7 +14237,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react93.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react94.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -13777,7 +14246,7 @@ function PuckProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react93.useCallback)(
+  const generateAppStore = (0, import_react94.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -13787,6 +14256,8 @@ function PuckProvider({ children }) {
         overrides: loadedOverrides,
         viewports,
         iframe,
+        _experimentalFullScreenCanvas: !!_experimentalFullScreenCanvas,
+        _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
         fieldTransforms: loadedFieldTransforms
@@ -13800,30 +14271,32 @@ function PuckProvider({ children }) {
       loadedOverrides,
       viewports,
       iframe,
+      _experimentalFullScreenCanvas,
+      _experimentalVirtualization,
       onAction,
       metadata,
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react93.useState)(
+  const [appStore] = (0, import_react94.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
-  }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
+  }, [generateAppStore]);
   useRegisterHistorySlice(appStore, {
     histories: blendedHistories,
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react93.useRef)(null);
-  (0, import_react93.useEffect)(() => {
+  const previousData = (0, import_react94.useRef)(null);
+  (0, import_react94.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -13837,14 +14310,16 @@ function PuckProvider({ children }) {
   }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
-    resolveAndCommitData();
+    setTimeout(() => {
+      resolveAndCommitData();
+    }, 0);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function Puck(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Layout, { children: props.children }) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -14107,12 +14582,12 @@ init_walk_tree();
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Components, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Outline, {}) })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) })
   ] })
 });
 // Annotate the CommonJS export names for ESM import in node: