@puckeditor/core 0.21.2-canary.edc81920 → 0.21.2

package/dist/{chunk-LBGOSTI5.mjs → chunk-PK2F2YZX.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-GYDP2UKB.mjs";
+} from "./chunk-WCC2G7U7.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-46RDHJGL.mjs";
+} from "./chunk-G74MZKKD.mjs";
 import {
   ChevronDown,
   ChevronRight,
@@ -68,7 +68,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-AFOEZCNE.mjs";
+} from "./chunk-22UJFAFA.mjs";
 import {
   getItem,
   insert,
@@ -1368,10 +1368,13 @@ var useLocalValue = (path, onChange) => {
   const value = useDeepField(path);
   const isFocused = useIsFocused(path);
   const [localValue, setLocalValue] = useState5(value == null ? void 0 : value.toString());
-  const onChangeLocal = useCallback2((val) => {
-    setLocalValue(val);
-    onChange(val);
-  }, []);
+  const onChangeLocal = useCallback2(
+    (val) => {
+      setLocalValue(val);
+      onChange(val);
+    },
+    [onChange]
+  );
   useEffect3(() => {
     if (!isFocused) {
       setLocalValue(value);
@@ -1988,7 +1991,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment5, jsx as jsx18 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-JHS34JLP.mjs").then((m) => ({
+  () => import("./Editor-EPSED64A.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2290,11 +2293,11 @@ init_react_import();
 import {
   forwardRef,
   memo as memo7,
-  useCallback as useCallback12,
-  useContext as useContext8,
+  useCallback as useCallback13,
+  useContext as useContext9,
   useEffect as useEffect16,
-  useMemo as useMemo11,
-  useRef as useRef8
+  useMemo as useMemo12,
+  useRef as useRef9
 } from "react";
 
 // components/DraggableComponent/index.tsx
@@ -2302,10 +2305,11 @@ init_react_import();
 import {
   useCallback as useCallback7,
   useContext as useContext5,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
+  useLayoutEffect,
   useMemo as useMemo7,
   useRef as useRef2,
-  useState as useState10,
+  useState as useState9,
   useTransition
 } from "react";
 
@@ -2354,7 +2358,12 @@ var ZoneStoreContext = createContext3(
     draggedItem: null,
     previewIndex: {},
     enabledIndex: {},
-    hoveringComponent: null
+    hoveringComponent: null,
+    registerRootVirtualizer: () => {
+    },
+    unregisterRootVirtualizer: () => {
+    },
+    scrollToComponent: () => false
   }))
 );
 var ZoneStoreProvider = ({
@@ -2390,21 +2399,6 @@ var DropZoneProvider = ({
 import { useShallow as useShallow4 } from "zustand/react/shallow";
 import { useSortable as useSortable2 } from "@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();
 import { useCallback as useCallback6 } from "react";
@@ -2437,10 +2431,26 @@ var useOnDragFinished = (cb, deps = []) => {
   }, [appStore, ...deps]);
 };
 
+// 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
 import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("DraggableComponent", styles_module_default8);
 var DEBUG2 = false;
+var MEASURE_EVERY_MS = 100;
 var space = 8;
 var actionsOverlayTop = space * 6.5;
 var actionsTop = -(actionsOverlayTop - 8);
@@ -2472,7 +2482,8 @@ var DraggableComponent = ({
   label,
   autoDragAxis,
   userDragAxis,
-  inDroppableZone = true
+  inDroppableZone = true,
+  itemRef
 }) => {
   const zoom = useAppStore(
     (s) => {
@@ -2480,11 +2491,15 @@ 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 = useRef2(0);
   const ctx = useContext5(dropZoneContext);
-  const [localZones, setLocalZones] = useState10({});
+  const [localZones, setLocalZones] = useState9({});
   const registerLocalZone = useCallback7(
     (zoneCompound2, active) => {
       var _a;
@@ -2519,7 +2534,7 @@ var DraggableComponent = ({
     })
   );
   const zoneStore = useContext5(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = useState10(userDragAxis || autoDragAxis);
+  const [dragAxis, setDragAxis] = useState9(userDragAxis || autoDragAxis);
   const dynamicCollisionDetector = useMemo7(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
@@ -2552,7 +2567,7 @@ var DraggableComponent = ({
     },
     feedback: "clone"
   });
-  useEffect9(() => {
+  useEffect8(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -2569,7 +2584,7 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
-  const [, setRerender] = useState10(0);
+  const [, setRerender] = useState9(0);
   const ref = useRef2(null);
   const refSetter = useCallback7(
     (el) => {
@@ -2577,79 +2592,111 @@ var DraggableComponent = ({
       if (ref.current !== el) {
         ref.current = el;
         setRerender((update) => update + 1);
+        if (itemRef) {
+          assignRefs([itemRef], el);
+        }
       }
     },
-    [sortableRef]
+    [itemRef, sortableRef]
   );
-  const [portalEl, setPortalEl] = useState10();
-  useEffect9(() => {
+  const [portalEl, setPortalEl] = useState9();
+  useEffect8(() => {
     var _a, _b, _c;
     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 = useCallback7(() => {
-    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]);
-  const [style, setStyle] = useState10();
+  }, [iframe.enabled]);
+  const [style, setStyle] = useState9();
+  const lastRectRef = useRef2(null);
+  const syncRafRef = useRef2(null);
   const sync = useCallback7(() => {
     setStyle(getStyle());
-  }, [ref.current, iframe]);
-  useEffect9(() => {
+    if (itemRef) {
+      assignRefs([itemRef], ref.current);
+    }
+  }, [getStyle, itemRef]);
+  const scheduleSync = useCallback7(() => {
+    if (syncRafRef.current != null) return;
+    syncRafRef.current = requestAnimationFrame(() => {
+      syncRafRef.current = null;
+      sync();
+    });
+  }, [sync]);
+  useEffect8(() => {
+    return () => {
+      if (syncRafRef.current != null) {
+        cancelAnimationFrame(syncRafRef.current);
+        syncRafRef.current = null;
+      }
+    };
+  }, []);
+  useEffect8(() => {
     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 = useCallback7(() => {
     setIsVisible(false);
   }, []);
   const showOverlay = useCallback7(() => {
     setIsVisible(true);
   }, []);
-  useEffect9(() => {
-    var _a;
-    registerNode(id, {
-      methods: { sync, showOverlay, hideOverlay },
-      element: (_a = ref.current) != null ? _a : null
-    });
+  const nodeHandleRef = useRef2({
+    sync: () => null,
+    hideOverlay: () => null,
+    showOverlay: () => null
+  });
+  useLayoutEffect(() => {
+    nodeHandleRef.current.sync = sync;
+    nodeHandleRef.current.hideOverlay = hideOverlay;
+    nodeHandleRef.current.showOverlay = showOverlay;
+  }, [hideOverlay, showOverlay, sync]);
+  useEffect8(() => {
+    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 = useMemo7(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
@@ -2664,11 +2711,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 {
@@ -2680,7 +2727,7 @@ var DraggableComponent = ({
         });
       }
     },
-    [index, zoneCompound, id, isSelected]
+    [index, zoneCompound, id, isSelected, _experimentalFullScreenCanvas]
   );
   const appStore = useAppStoreApi();
   const onSelectParent = useCallback7(() => {
@@ -2718,12 +2765,12 @@ var DraggableComponent = ({
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = useState10(false);
+  const [hover, setHover] = useState9(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  useEffect9(() => {
+  useEffect8(() => {
     if (!ref.current) {
       return;
     }
@@ -2768,13 +2815,13 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  const [isVisible, setIsVisible] = useState10(false);
-  const [dragFinished, setDragFinished] = useState10(true);
+  const [isVisible, setIsVisible] = useState9(false);
+  const [dragFinished, setDragFinished] = useState9(true);
   const [_, startTransition] = useTransition();
-  useEffect9(() => {
+  useEffect8(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
-        sync();
+        scheduleSync();
         setIsVisible(true);
         setThisWasDragging(false);
       } else {
@@ -2782,7 +2829,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = useState10(false);
+  const [thisWasDragging, setThisWasDragging] = useState9(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -2793,14 +2840,51 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  useEffect9(() => {
+  useEffect8(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
+  useEffect8(() => {
+    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 = useCallback7(
     (el) => {
       if (el) {
@@ -2826,7 +2910,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  useEffect9(() => {
+  useEffect8(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -2965,7 +3049,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_pl7z0_1", "Drawer-draggable": "_Drawer-draggable_pl7z0_8", "Drawer-draggableBg": "_Drawer-draggableBg_pl7z0_12", "DrawerItem-draggable": "_DrawerItem-draggable_pl7z0_22", "DrawerItem--disabled": "_DrawerItem--disabled_pl7z0_35", "DrawerItem": "_DrawerItem_pl7z0_22", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_pl7z0_45", "DrawerItem-name": "_DrawerItem-name_pl7z0_63" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo9, useState as useState12 } from "react";
+import { useMemo as useMemo9, useState as useState11 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -2974,10 +3058,10 @@ import {
   createContext as createContext4,
   useCallback as useCallback8,
   useContext as useContext6,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useMemo as useMemo8,
   useRef as useRef3,
-  useState as useState11
+  useState as useState10
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -3363,7 +3447,7 @@ var dragListenerContext = createContext4({
 });
 function useDragListener(type, fn, deps = []) {
   const { setDragListeners } = useContext6(dragListenerContext);
-  useEffect10(() => {
+  useEffect9(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -3395,8 +3479,9 @@ var DragDropContextClient = ({
   const appStore = useAppStoreApi();
   const debouncedParamsRef = useRef3(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState11(
-    () => createStore4(() => ({
+  const [zoneStore] = useState10(() => {
+    const rootVirtualizers = /* @__PURE__ */ new Map();
+    return createStore4(() => ({
       zoneDepthIndex: {},
       nextZoneDepthIndex: {},
       areaDepthIndex: {},
@@ -3404,9 +3489,35 @@ var DragDropContextClient = ({
       draggedItem: null,
       previewIndex: {},
       enabledIndex: {},
-      hoveringComponent: null
-    }))
-  );
+      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 getChanged = useCallback8(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
@@ -3452,7 +3563,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  useEffect10(() => {
+  useEffect9(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -3466,7 +3577,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = useState11(() => [
+  const [plugins] = useState10(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -3514,7 +3625,7 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState11({});
+  const [dragListeners, setDragListeners] = useState10({});
   const dragMode = useRef3(null);
   const initialSelector = useRef3(void 0);
   const nextContextValue = useMemo8(
@@ -3554,24 +3665,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: {
@@ -3579,9 +3675,6 @@ var DragDropContextClient = ({
                     isDragging: false
                   }
                 });
-                (_a2 = dragListeners.dragend) == null ? void 0 : _a2.forEach((fn) => {
-                  fn(event, manager);
-                });
                 return;
               }
               if (thisPreview) {
@@ -3594,14 +3687,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({
@@ -3610,7 +3701,7 @@ var DragDropContextClient = ({
                   itemSelector: { index, zone },
                   isDragging: false
                 },
-                recordHistory: true
+                recordHistory: false
               });
               (_b2 = dragListeners.dragend) == null ? void 0 : _b2.forEach((fn) => {
                 fn(event, manager);
@@ -3850,7 +3941,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = useState12(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = useState11(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -3912,7 +4003,7 @@ Drawer.Item = DrawerItem;
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-import { useEffect as useEffect11, useRef as useRef4, useState as useState13 } from "react";
+import { useEffect as useEffect10, useRef as useRef4, useState as useState12 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -3920,8 +4011,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = useState13(0);
-  const [isAnimating, setIsAnimating] = useState13(false);
+  const [prevHeight, setPrevHeight] = useState12(0);
+  const [isAnimating, setIsAnimating] = useState12(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -3932,7 +4023,6 @@ var useMinEmptyHeight = ({
   const numItems = useRef4(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
-      var _a;
       if (finished) {
         const newNumItems = getNumItems(appStore, zoneCompound);
         setPrevHeight(0);
@@ -3943,19 +4033,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);
@@ -3964,7 +4050,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  useEffect11(() => {
+  useEffect10(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -3979,24 +4065,9 @@ 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();
-import { useContext as useContext7, useEffect as useEffect12, useState as useState14 } from "react";
+import { useContext as useContext7, useEffect as useEffect11, useState as useState13 } from "react";
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
@@ -4021,8 +4092,8 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = useState14(contentIds);
-  const [localPreview, setLocalPreview] = useState14(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = useState13(contentIds);
+  const [localPreview, setLocalPreview] = useState13(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -4057,7 +4128,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  useEffect12(() => {
+  useEffect11(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -4075,13 +4146,13 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback10, useEffect as useEffect13, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useState as useState14 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = useState15(
+  const [dragAxis, setDragAxis] = useState14(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
   const calculateDragAxis = useCallback10(() => {
@@ -4096,7 +4167,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  useEffect13(() => {
+  useEffect12(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -4105,7 +4176,7 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  useEffect13(calculateDragAxis, [status, collisionAxis]);
+  useEffect12(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
@@ -4189,7 +4260,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-import { memo as memo4, useEffect as useEffect14, useRef as useRef6, useState as useState16 } from "react";
+import { memo as memo4, useEffect as useEffect13, useRef as useRef6, useState as useState15 } from "react";
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -4257,7 +4328,7 @@ var InlineTextFieldInternal = ({
   const ref = useRef6(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
-  useEffect14(() => {
+  useEffect13(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -4303,8 +4374,8 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref.current, value, disableLineBreaks]);
-  const [isHovering, setIsHovering] = useState16(false);
-  const [isFocused, setIsFocused] = useState16(false);
+  const [isHovering, setIsHovering] = useState15(false);
+  const [isFocused, setIsFocused] = useState15(false);
   return /* @__PURE__ */ jsx26(
     "span",
     {
@@ -4394,7 +4465,7 @@ var getInlineTextTransform = () => ({
 // lib/field-transforms/default-transforms/rich-text-transform.tsx
 init_react_import();
 import {
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useRef as useRef7,
   useCallback as useCallback11,
   memo as memo5,
@@ -4403,7 +4474,7 @@ import {
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-JHS34JLP.mjs").then((m) => ({
+  () => import("./Editor-EPSED64A.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4435,7 +4506,7 @@ var InlineEditorWrapper = memo5(
       );
       appStoreApi.getState().setUi({ itemSelector });
     };
-    useEffect15(() => {
+    useEffect14(() => {
       if (!portalRef.current) return;
       const cleanup = registerOverlayPortal(portalRef.current, {
         disableDragOnFocus: true
@@ -4569,8 +4640,210 @@ var MemoizeComponent = memo6(RenderComponent, (prev, next) => {
   return prev.Component === next.Component && shallowEqual(prev.componentProps, next.componentProps, ["puck"]) && puckEquals;
 });
 
+// components/DropZone/VirtualizedDropZone.tsx
+init_react_import();
+import {
+  useCallback as useCallback12,
+  useContext as useContext8,
+  useEffect as useEffect15,
+  useMemo as useMemo11,
+  useRef as useRef8
+} from "react";
+import {
+  defaultRangeExtractor,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  observeWindowOffset,
+  observeWindowRect,
+  useVirtualizer,
+  windowScroll
+} from "@tanstack/react-virtual";
+import { Fragment as Fragment8, jsx as jsx30 } from "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 = useContext8(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 = useRef8(/* @__PURE__ */ new Map());
+  const appStoreApi = useAppStoreApi();
+  const resolveIndex = useCallback12(
+    (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 = useMemo11(() => {
+    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 = useCallback12(
+    (range) => {
+      const indexes = defaultRangeExtractor(range);
+      pinnedIndexes.forEach((index) => {
+        if (!indexes.includes(index)) {
+          indexes.push(index);
+        }
+      });
+      indexes.sort((a, b) => a - b);
+      return indexes;
+    },
+    [pinnedIndexes]
+  );
+  const virtualizer = 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 ? observeWindowRect(instance, cb) : observeElementRect(instance, cb),
+    observeElementOffset: (instance, cb) => iframeWindow ? observeWindowOffset(instance, cb) : observeElementOffset(instance, cb),
+    scrollToFn: (offset, options, instance) => iframeWindow ? windowScroll(offset, options, instance) : elementScroll(offset, options, instance),
+    rangeExtractor,
+    initialOffset: () => iframeWindow ? iframeWindow.scrollY : 0
+  });
+  useEffect15(() => {
+    zoneStore.getState().registerRootVirtualizer(zoneCompound, {
+      resolveIndex: (targetId) => resolveIndex(targetId),
+      virtualizer
+    });
+    return () => {
+      zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
+    };
+  }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
+  const getMeasureRef = useCallback12((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;
+  }, []);
+  useEffect15(() => {
+    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 = useMemo11(() => {
+    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__ */ jsx30(
+            "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__ */ jsx30(
+          "div",
+          {
+            style: { height: `${trailingGap}px` }
+          },
+          `gap:${previousIndex}:end`
+        )
+      );
+    }
+    return items;
+  }, [totalSize, virtualItems, getMeasureRef]);
+  return /* @__PURE__ */ jsx30(Fragment8, { children: renderedItems });
+};
+
 // components/DropZone/index.tsx
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default9);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
@@ -4582,25 +4855,26 @@ var InsertPreview = ({
   if (element) {
     return (
       // Safe to use this since the HTML is set by the user
-      /* @__PURE__ */ jsx30("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
+      /* @__PURE__ */ jsx31("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
     );
   }
-  return /* @__PURE__ */ jsx30(DrawerItemInner, { name: label, children: override });
+  return /* @__PURE__ */ jsx31(DrawerItemInner, { name: label, children: override });
 };
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx30(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx31(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
   index,
   dragAxis,
   collisionAxis,
-  inDroppableZone
+  inDroppableZone,
+  itemRef
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = useContext8(dropZoneContext);
+  const ctx = useContext9(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = useContext8(ZoneStoreContext);
+  const zoneStore = useContext9(ZoneStoreContext);
   const nodeProps = useAppStore(
     useShallow6((s) => {
       var _a2;
@@ -4620,7 +4894,7 @@ var DropZoneChild = ({
     })
   );
   const appStore = useAppStoreApi();
-  const item = useMemo11(() => {
+  const item = useMemo12(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -4642,7 +4916,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const puckProps = useMemo11(
+  const puckProps = useMemo12(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -4665,7 +4939,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 = useMemo11(
+  const defaultsProps = useMemo12(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
       editMode: true
@@ -4673,7 +4947,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
   );
-  const defaultedNode = useMemo11(
+  const defaultedNode = useMemo12(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -4683,8 +4957,8 @@ var DropZoneChild = ({
   const config = useAppStore((s) => s.config);
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
-  const combinedFieldTransforms = useMemo11(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx30(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+  const combinedFieldTransforms = useMemo12(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx31(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -4704,7 +4978,7 @@ var DropZoneChild = ({
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     DraggableComponent,
     {
       id: componentId,
@@ -4718,10 +4992,11 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
+      itemRef,
       children: (dragRef) => {
         var _a2;
         if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx31(
             MemoizeComponent,
             {
               Component: Render2,
@@ -4731,14 +5006,14 @@ var DropZoneChild = ({
             }
           );
         }
-        return /* @__PURE__ */ jsx30("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx31("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx31(
           InsertPreview,
           {
             label,
             override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
             element: "element" in item && item.element ? item.element : void 0
           }
-        ) : /* @__PURE__ */ jsx30(
+        ) : /* @__PURE__ */ jsx31(
           MemoizeComponent,
           {
             Component: Render2,
@@ -4761,7 +5036,7 @@ var DropZoneEdit = forwardRef(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = useContext8(dropZoneContext);
+    const ctx = useContext9(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -4815,11 +5090,11 @@ var DropZoneEdit = forwardRef(
         }
       }
     }, [zoneType]);
-    const contentIds = useMemo11(() => {
+    const contentIds = useMemo12(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = useRef8(null);
-    const acceptsTarget = useCallback12(
+    const ref = useRef9(null);
+    const acceptsTarget = useCallback13(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -4872,7 +5147,7 @@ var DropZoneEdit = forwardRef(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = useContext8(ZoneStoreContext);
+    const zoneStore = useContext9(ZoneStoreContext);
     useEffect16(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
@@ -4902,14 +5177,19 @@ var DropZoneEdit = forwardRef(
       userMinEmptyHeight,
       ref
     });
-    const setRefs = useCallback12(
+    const setRefs = useCallback13(
       (node) => {
         assignRefs([ref, dropRef, userRef], node);
       },
       [dropRef]
     );
+    const _experimentalVirtualization = useAppStore(
+      (s) => s._experimentalVirtualization
+    );
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ jsx30(
+    const isRootAreaZone = (areaId != null ? areaId : rootAreaId) === rootAreaId && depth === 0;
+    const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
+    return /* @__PURE__ */ jsx31(
       El,
       {
         className: `${getClassName17({
@@ -4927,20 +5207,37 @@ var DropZoneEdit = forwardRef(
           "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
-        children: contentIdsWithPreview.map((componentId, i) => {
-          return /* @__PURE__ */ jsx30(
-            DropZoneChildMemo,
-            {
-              zoneCompound,
-              componentId,
-              dragAxis,
-              index: i,
-              collisionAxis,
-              inDroppableZone: targetAccepted
-            },
-            componentId
-          );
-        })
+        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx31(
+          VirtualizedDropZone,
+          {
+            contentIds: contentIdsWithPreview,
+            zoneCompound,
+            renderItem: (props) => /* @__PURE__ */ jsx31(
+              DropZoneChildMemo,
+              {
+                zoneCompound,
+                componentId: props.componentId,
+                dragAxis,
+                index: props.index,
+                collisionAxis,
+                inDroppableZone: targetAccepted,
+                itemRef: props.measureRef
+              },
+              props.componentId
+            )
+          }
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx31(
+          DropZoneChildMemo,
+          {
+            zoneCompound,
+            componentId,
+            dragAxis,
+            index: i,
+            collisionAxis,
+            inDroppableZone: targetAccepted
+          },
+          componentId
+        ))
       }
     );
   }
@@ -4951,8 +5248,8 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx30(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = useMemo11(
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx31(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = useMemo12(
     () => ({
       areaId: props.id,
       depth: 1
@@ -4960,7 +5257,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component.fields, props);
-  return /* @__PURE__ */ jsx30(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx31(
     Component.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       puck: __spreadProps(__spreadValues({}, props.puck), {
@@ -4970,12 +5267,12 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx30(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx31(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = useContext8(dropZoneContext);
+    const ctx = useContext9(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = useContext8(renderContext);
+    const { config, data, metadata } = useContext9(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
     useEffect16(() => {
@@ -4992,10 +5289,10 @@ var DropZoneRender = forwardRef(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx30(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx31(El, { className, style, ref, children: content.map((item) => {
       const Component = config.components[item.type];
       if (Component) {
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx31(
           DropZoneRenderItem,
           {
             config,
@@ -5009,20 +5306,20 @@ var DropZoneRender = forwardRef(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx30(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx31(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef(
   function DropZone2(props, ref) {
-    const ctx = useContext8(dropZoneContext);
+    const ctx = useContext9(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx30(Fragment8, { children: /* @__PURE__ */ jsx30(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx31(Fragment9, { children: /* @__PURE__ */ jsx31(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx30(Fragment8, { children: /* @__PURE__ */ jsx30(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx31(Fragment9, { children: /* @__PURE__ */ jsx31(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
 // components/Render/index.tsx
-import React3, { useMemo as useMemo12 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import React3, { useMemo as useMemo13 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -5054,10 +5351,10 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx31(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx32(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const richtextProps = useRichtextProps((_a = config.root) == null ? void 0 : _a.fields, pageProps);
-  const nextContextValue = useMemo12(
+  const nextContextValue = useMemo13(
     () => ({
       mode: "render",
       depth: 0
@@ -5065,14 +5362,14 @@ function Render({
     []
   );
   if ((_b = config.root) == null ? void 0 : _b.render) {
-    return /* @__PURE__ */ jsx31(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx31(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx31(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx31(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx32(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx32(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx32(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx32(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx31(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx31(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx31(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx32(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx32(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx32(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/use-puck.ts
 init_react_import();
-import { createContext as createContext5, useContext as useContext9, useEffect as useEffect17, useState as useState17 } from "react";
+import { createContext as createContext5, useContext as useContext10, useEffect as useEffect17, useState as useState16 } from "react";
 import { createStore as createStore5, useStore as useStore3 } from "zustand";
 
 // lib/data/resolve-data-by-id.ts
@@ -5191,7 +5488,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = useState17(
+  const [usePuckStore] = useState16(
     () => createStore5(
       () => generateUsePuck(
         convertToPickedStore(appStore.getState()),
@@ -5211,7 +5508,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = useContext9(UsePuckStoreContext);
+    const usePuckApi = useContext10(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -5231,7 +5528,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = useContext9(UsePuckStoreContext);
+  const usePuckApi = useContext10(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -5246,7 +5543,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect19, useState as useState18 } from "react";
+import { useEffect as useEffect19, useState as useState17 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -5257,7 +5554,7 @@ var styles_module_default12 = { "ComponentList": "_ComponentList_1rrlt_1", "Comp
 
 // components/ComponentList/index.tsx
 import { useEffect as useEffect18 } from "react";
-import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("ComponentList", styles_module_default12);
 var ComponentListItem = ({
   name,
@@ -5277,7 +5574,7 @@ var ComponentListItem = ({
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx32(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ jsx33(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -5303,14 +5600,14 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx32("div", { children: title }),
-          /* @__PURE__ */ jsx32("div", { className: getClassName18("titleIcon"), children: expanded ? /* @__PURE__ */ jsx32(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx32(ChevronDown, { size: 12 }) })
+          /* @__PURE__ */ jsx33("div", { children: title }),
+          /* @__PURE__ */ jsx33("div", { className: getClassName18("titleIcon"), children: expanded ? /* @__PURE__ */ jsx33(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx33(ChevronDown, { size: 12 }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: getClassName18("content"), children: /* @__PURE__ */ jsx32(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx33("div", { className: getClassName18("content"), children: /* @__PURE__ */ jsx33(Drawer, { children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
-      return /* @__PURE__ */ jsx32(
+      return /* @__PURE__ */ jsx33(
         ComponentListItem,
         {
           label: (_a = config.components[componentKey]["label"]) != null ? _a : componentKey,
@@ -5324,9 +5621,9 @@ var ComponentList = ({
 ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var useComponentList = () => {
-  const [componentList, setComponentList] = useState18();
+  const [componentList, setComponentList] = useState17();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
   useEffect19(() => {
@@ -5345,7 +5642,7 @@ var useComponentList = () => {
           if (category.visible === false) {
             return null;
           }
-          return /* @__PURE__ */ jsx33(
+          return /* @__PURE__ */ jsx34(
             ComponentList,
             {
               id: categoryKey,
@@ -5353,7 +5650,7 @@ var useComponentList = () => {
               children: category.components.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx33(
+                return /* @__PURE__ */ jsx34(
                   ComponentList.Item,
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
@@ -5373,7 +5670,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__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             ComponentList,
             {
               id: "other",
@@ -5381,7 +5678,7 @@ var useComponentList = () => {
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
-                return /* @__PURE__ */ jsx33(
+                return /* @__PURE__ */ jsx34(
                   ComponentList.Item,
                   {
                     name: componentName,
@@ -5403,12 +5700,12 @@ var useComponentList = () => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { useMemo as useMemo14 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = useMemo13(() => {
+  const Wrapper = useMemo14(() => {
     if (overrides.components) {
       console.warn(
         "The `components` override has been deprecated and renamed to `drawer`"
@@ -5416,7 +5713,7 @@ var Components = () => {
     }
     return overrides.components || overrides.drawer || "div";
   }, [overrides]);
-  return /* @__PURE__ */ jsx34(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx34(ComponentList, { id: "all" }) });
+  return /* @__PURE__ */ jsx35(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx35(ComponentList, { id: "all" }) });
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/blocks/styles.module.css#css-module
@@ -5424,13 +5721,13 @@ init_react_import();
 var styles_module_default13 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
 
 // plugins/blocks/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("BlocksPlugin", styles_module_default13);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ jsx35("div", { className: getClassName19(), children: /* @__PURE__ */ jsx35(Components, {}) }),
-  icon: /* @__PURE__ */ jsx35(Hammer, {})
+  render: () => /* @__PURE__ */ jsx36("div", { className: getClassName19(), children: /* @__PURE__ */ jsx36(Components, {}) }),
+  icon: /* @__PURE__ */ jsx36(Hammer, {})
 });
 
 // plugins/outline/index.tsx
@@ -5446,99 +5743,157 @@ init_react_import();
 init_react_import();
 var styles_module_default14 = { "LayerTree": "_LayerTree_7rx04_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_7rx04_11", "LayerTree-helper": "_LayerTree-helper_7rx04_17", "Layer": "_Layer_7rx04_1", "Layer-inner": "_Layer-inner_7rx04_29", "Layer--containsZone": "_Layer--containsZone_7rx04_35", "Layer-clickable": "_Layer-clickable_7rx04_39", "Layer--isSelected": "_Layer--isSelected_7rx04_61", "Layer-chevron": "_Layer-chevron_7rx04_77", "Layer--childIsSelected": "_Layer--childIsSelected_7rx04_78", "Layer-zones": "_Layer-zones_7rx04_82", "Layer-title": "_Layer-title_7rx04_96", "Layer-name": "_Layer-name_7rx04_105", "Layer-icon": "_Layer-icon_7rx04_111", "Layer-zoneIcon": "_Layer-zoneIcon_7rx04_116" };
 
-// 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
-import { useCallback as useCallback13, useContext as useContext10 } from "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
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs11 } from "react/jsx-runtime";
+import {
+  forwardRef as forwardRef2,
+  useCallback as useCallback14,
+  useContext as useContext11,
+  useRef as useRef10
+} from "react";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("LayerTree", styles_module_default14);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default14);
-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 = forwardRef2(function Layer2({
+  childIsSelected,
+  dataIndex,
+  depth,
+  isSelected,
+  node,
+  selectedId,
+  selectedPathIds
+}, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
-  const setItemSelector = useCallback13(
-    (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(
-    useShallow7(
-      (s) => Object.keys(s.state.indexes.zones).filter(
-        (z) => z.split(":")[0] === itemId
-      )
-    )
-  );
-  const containsZone = zonesForItem.length > 0;
-  const zoneStore = useContext10(ZoneStoreContext);
+  const zoneStore = useContext11(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();
+  const containsZone = node.childZones.length > 0;
+  const setItemSelector = useCallback14(
+    (itemSelector) => {
+      dispatch({ type: "setUi", ui: { itemSelector } });
+    },
+    [dispatch]
+  );
+  const shouldRenderChildren = isSelected || childIsSelected;
   return /* @__PURE__ */ jsxs11(
     "li",
     {
+      ref,
       className: getClassNameLayer({
-        isSelected,
-        isHovering,
+        childIsSelected,
         containsZone,
-        childIsSelected
+        isHovering,
+        isSelected
       }),
+      "data-index": dataIndex,
+      "data-puck-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs11(
           "button",
           {
             type: "button",
@@ -5548,99 +5903,207 @@ 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__ */ jsx36(
+              containsZone && /* @__PURE__ */ jsx37(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx36(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ jsx37(ChevronDown, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs11("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("icon"), children: nodeData.data.type === "Text" || nodeData.data.type === "Heading" ? /* @__PURE__ */ jsx36(Type, { size: "16" }) : /* @__PURE__ */ jsx36(LayoutGrid, { size: "16" }) }),
-                /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("name"), children: label })
+                /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("icon"), children: node.componentType === "Text" || node.componentType === "Heading" ? /* @__PURE__ */ jsx37(Type, { size: "16" }) : /* @__PURE__ */ jsx37(LayoutGrid, { size: "16" }) }),
+                /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
             ]
           }
         ) }),
-        containsZone && zonesForItem.map((subzone) => /* @__PURE__ */ jsx36("div", { className: getClassNameLayer("zones"), children: /* @__PURE__ */ jsx36(LayerTree, { zoneCompound: subzone }) }, subzone))
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: getClassNameLayer("zones"),
+            children: /* @__PURE__ */ jsx37(
+              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(
-    useShallow7(
-      (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__ */ jsxs11(Fragment10, { children: [
+    tree.label && /* @__PURE__ */ jsxs11("div", { className: getClassName20("zoneTitle"), children: [
+      /* @__PURE__ */ jsx37("div", { className: getClassName20("zoneIcon"), children: /* @__PURE__ */ jsx37(Layers, { size: "16" }) }),
+      tree.label
+    ] }),
+    shouldVirtualize ? /* @__PURE__ */ jsx37(
+      VirtualizedLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    ) : /* @__PURE__ */ jsx37(
+      StaticLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
       }
     )
-  );
-  return /* @__PURE__ */ jsxs11(Fragment9, { children: [
-    label && /* @__PURE__ */ jsxs11("div", { className: getClassName20("zoneTitle"), children: [
-      /* @__PURE__ */ jsx36("div", { className: getClassName20("zoneIcon"), children: /* @__PURE__ */ jsx36(Layers, { size: "16" }) }),
-      label
-    ] }),
-    /* @__PURE__ */ jsxs11("ul", { className: getClassName20(), children: [
-      contentIds.length === 0 && /* @__PURE__ */ jsx36("div", { className: getClassName20("helper"), children: "No items" }),
-      contentIds.map((itemId, i) => {
-        return /* @__PURE__ */ jsx36(
-          Layer,
+  ] });
+};
+var StaticLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  return /* @__PURE__ */ jsxs11("ul", { className: getClassName20(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: "No items" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx37(
+      Layer,
+      {
+        childIsSelected: selectedPathIds.has(node.itemId),
+        depth,
+        isSelected: selectedId === node.itemId,
+        node,
+        selectedId,
+        selectedPathIds
+      },
+      node.itemId
+    ))
+  ] });
+};
+var VirtualizedLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const listRef = useRef10(null);
+  const virtualizer = useVirtualizer2({
+    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__ */ jsx37(
+          "li",
           {
-            index: i,
-            itemId,
-            zoneCompound
+            "aria-hidden": "true",
+            style: { height: `${gapSize}px` }
           },
-          itemId
-        );
-      })
-    ] })
+          `gap:${tree.zoneCompound}:${previousIndex}:${virtualItem.index}`
+        )
+      );
+    }
+    renderedItems.push(
+      /* @__PURE__ */ jsx37(
+        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__ */ jsx37(
+        "li",
+        {
+          "aria-hidden": "true",
+          style: { height: `${trailingGap}px` }
+        },
+        `gap:${tree.zoneCompound}:${previousIndex}:end`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs11("ul", { className: getClassName20(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: "No items" }),
+    renderedItems
   ] });
 };
+var LayerTree = ({
+  selectedId,
+  selectedPathIds,
+  trees
+}) => {
+  return /* @__PURE__ */ jsx37(Fragment10, { children: trees.map((tree) => /* @__PURE__ */ jsx37(
+    LayerTreeZone,
+    {
+      depth: 0,
+      selectedId,
+      selectedPathIds,
+      tree
+    },
+    tree.zoneCompound
+  )) });
+};
 
 // components/Puck/components/Outline/index.tsx
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -5651,22 +6114,48 @@ var findZonesForArea = (state, area) => {
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
+import { jsx as jsx38 } from "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(
-    useShallow8((s) => findZonesForArea(s.state, "root"))
+    useShallow7((s) => findZonesForArea(s.state, "root"))
   );
-  const Wrapper = useMemo14(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx37(Wrapper, { children: rootZones.map((zoneCompound) => /* @__PURE__ */ jsx37(
+  const selectedPathIds = useMemo15(() => {
+    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 = useMemo15(
+    () => rootZones.map(
+      (zoneCompound) => buildLayerTree({
+        config,
+        label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
+        nodes,
+        zoneCompound,
+        zones
+      })
+    ),
+    [config, nodes, rootZones, zones]
+  );
+  const Wrapper = useMemo15(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ jsx38(Wrapper, { children: /* @__PURE__ */ jsx38(
     LayerTree,
     {
-      label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
-      zoneCompound
-    },
-    zoneCompound
-  )) });
+      selectedId,
+      selectedPathIds,
+      trees
+    }
+  ) });
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/outline/styles.module.css#css-module
@@ -5674,13 +6163,13 @@ init_react_import();
 var styles_module_default15 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("OutlinePlugin", styles_module_default15);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx38("div", { className: getClassName21(), children: /* @__PURE__ */ jsx38(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx38(Layers, {})
+  render: () => /* @__PURE__ */ jsx39("div", { className: getClassName21(), children: /* @__PURE__ */ jsx39(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx39(Layers, {})
 });
 
 // plugins/fields/index.tsx
@@ -5695,7 +6184,7 @@ var styles_module_default16 = { "Breadcrumbs": "_Breadcrumbs_1c9yh_1", "Breadcru
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -5707,7 +6196,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return useMemo15(() => {
+  return useMemo16(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c, _d;
       const [componentId] = zoneCompound.split(":");
@@ -5738,7 +6227,7 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx39, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default16);
 var Breadcrumbs = ({
   children,
@@ -5748,7 +6237,7 @@ var Breadcrumbs = ({
   const breadcrumbs = useBreadcrumbs(numParents);
   return /* @__PURE__ */ jsxs12("div", { className: getClassName22(), children: [
     breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName22("breadcrumb"), children: [
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -5757,7 +6246,7 @@ var Breadcrumbs = ({
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx39(ChevronRight, { size: 16 })
+      /* @__PURE__ */ jsx40(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
@@ -5773,18 +6262,18 @@ var styles_module_default17 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 // components/Puck/components/Fields/index.tsx
 import {
   memo as memo8,
-  useCallback as useCallback14,
-  useContext as useContext11,
+  useCallback as useCallback15,
+  useContext as useContext12,
   useEffect as useEffect20,
-  useMemo as useMemo16
+  useMemo as useMemo17
 } from "react";
-import { useShallow as useShallow9 } from "zustand/react/shallow";
-import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useShallow as useShallow8 } from "zustand/react/shallow";
+import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckFields", styles_module_default17);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx40(Fragment10, { children });
+  return /* @__PURE__ */ jsx41(Fragment11, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -5839,17 +6328,17 @@ var FieldsChildInner = ({ fieldName }) => {
     return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
   });
   const permissions = useAppStore(
-    useShallow9((s) => {
+    useShallow8((s) => {
       const { selectedItem, permissions: permissions2 } = s;
       return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback14(createOnChange(fieldName, appStore), [
+  const onChange = useCallback15(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
-  const fieldStore = useContext11(fieldContextStore.ctx);
+  const fieldStore = useContext12(fieldContextStore.ctx);
   useEffect20(() => {
     return appStore.subscribe(
       (s) => {
@@ -5864,7 +6353,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx40("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx41(
     AutoFieldPrivate,
     {
       field,
@@ -5877,12 +6366,12 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = useMemo16(() => {
+  const initialValue = useMemo17(() => {
     var _a;
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ jsx40(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx40(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx41(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx41(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -5892,7 +6381,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
-  const itemSelector = useAppStore(useShallow9((s) => s.state.ui.itemSelector));
+  const itemSelector = useAppStore(useShallow8((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => {
     var _a;
     return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -5901,7 +6390,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   useRegisterFieldsSlice(appStore, id);
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(
-    useShallow9((s) => {
+    useShallow8((s) => {
       if (s.fields.id === id) {
         return Object.keys(s.fields.fields);
       }
@@ -5909,7 +6398,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo16(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo17(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs13(
     "form",
     {
@@ -5918,8 +6407,8 @@ var FieldsInternal = ({ wrapFields = true }) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx40(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx40(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx40("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx40("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx40(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx41(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx41(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx41("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx41("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx41(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -5931,7 +6420,7 @@ init_react_import();
 var styles_module_default18 = { "FieldsPlugin": "_FieldsPlugin_nd930_1", "FieldsPlugin-header": "_FieldsPlugin-header_nd930_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default18);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
@@ -5945,10 +6434,10 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
   render: () => /* @__PURE__ */ jsxs14("div", { className: getClassName24(), children: [
-    /* @__PURE__ */ jsx41("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx41(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx41(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx41(Fields, {})
+    /* @__PURE__ */ jsx42("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx42(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx42(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx42(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx41(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx42(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
@@ -5956,29 +6445,29 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback22,
-  useContext as useContext14,
+  useCallback as useCallback23,
+  useContext as useContext15,
   useEffect as useEffect29,
-  useMemo as useMemo24,
-  useRef as useRef14,
-  useState as useState26
+  useMemo as useMemo25,
+  useRef as useRef16,
+  useState as useState25
 } from "react";
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef9, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect22, useRef as useRef11, useMemo as useMemo18 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext6,
-  useContext as useContext12,
+  useContext as useContext13,
   useEffect as useEffect21,
-  useState as useState19
+  useState as useState18
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment11, jsx as jsx42 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx43 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6193,10 +6682,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx42(Fragment11, { children });
+  return /* @__PURE__ */ jsx43(Fragment12, { children });
 };
 var autoFrameContext = createContext6({});
-var useFrame = () => useContext12(autoFrameContext);
+var useFrame = () => useContext13(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -6217,10 +6706,10 @@ function AutoFrame(_a) {
     "onNotReady",
     "frameRef"
   ]);
-  const [loaded, setLoaded] = useState19(false);
-  const [ctx, setCtx] = useState19({});
-  const [mountTarget, setMountTarget] = useState19();
-  const [stylesLoaded, setStylesLoaded] = useState19(false);
+  const [loaded, setLoaded] = useState18(false);
+  const [ctx, setCtx] = useState18({});
+  const [mountTarget, setMountTarget] = useState18();
+  const [stylesLoaded, setStylesLoaded] = useState18(false);
   useEffect21(() => {
     var _a2;
     if (frameRef.current) {
@@ -6240,7 +6729,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -6250,7 +6739,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx42(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx43(
         CopyHostStyles,
         {
           debug,
@@ -6269,7 +6758,7 @@ init_react_import();
 var styles_module_default19 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment12, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx44 } from "react/jsx-runtime";
 var getClassName25 = get_class_name_factory_default("PuckPreview", styles_module_default19);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
@@ -6322,7 +6811,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback15(
+  const Page = useCallback16(
     (pageProps) => {
       var _a, _b, _c, _d;
       const propsWithSlots = useSlots(
@@ -6336,15 +6825,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__ */ jsx43(Fragment12, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx44(Fragment13, { children: propsWithSlots.children });
     },
     [config]
   );
-  const Frame = useMemo17(() => overrides.iframe, [overrides]);
+  const Frame = useMemo18(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef9(null);
+  const ref = useRef11(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx43(
+  const inner = !renderData ? /* @__PURE__ */ jsx44(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
@@ -6354,15 +6843,15 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx43(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx44(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx43(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx44(Render, { data: renderData, config, metadata });
   useEffect22(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: getClassName25(),
@@ -6374,7 +6863,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx43(
+      children: iframe.enabled ? /* @__PURE__ */ jsx44(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -6387,14 +6876,14 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx43(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx44(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx43(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx44(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx43(
+      ) : /* @__PURE__ */ jsx44(
         "div",
         {
           id: "preview-frame",
@@ -6410,7 +6899,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo19 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -6452,7 +6941,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo18(() => {
+  return useMemo19(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -6462,7 +6951,7 @@ import { deepEqual as deepEqual2 } from "fast-equals";
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
-import { useEffect as useEffect28, useMemo as useMemo23, useState as useState25 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo24, useState as useState24 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
@@ -6470,10 +6959,10 @@ var styles_module_default20 = { "Puck": "_Puck_1dd16_19", "Puck-portal": "_Puck-
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect23, useState as useState20 } from "react";
+import { useEffect as useEffect23, useState as useState19 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState20();
+  const [el, setEl] = useState19();
   useEffect23(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -6497,15 +6986,15 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment13, jsx as jsx44 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx44(Fragment13, { children });
+import { Fragment as Fragment14, jsx as jsx45 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment14, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback17 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback16(() => {
+  const toggleInteractive = useCallback17(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -6520,7 +7009,7 @@ var usePreviewModeHotkeys = () => {
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo9, useCallback as useCallback17, useMemo as useMemo19, useState as useState21 } from "react";
+import { memo as memo9, useCallback as useCallback18, useMemo as useMemo20, useState as useState20 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -6530,7 +7019,7 @@ init_react_import();
 var styles_module_default21 = { "MenuBar": "_MenuBar_8pf8c_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_8pf8c_14", "MenuBar-inner": "_MenuBar-inner_8pf8c_29", "MenuBar-history": "_MenuBar-history_8pf8c_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
 function MenuBar({
   menuOpen = false,
@@ -6541,7 +7030,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__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       className: getClassName26({ menuOpen }),
@@ -6557,28 +7046,28 @@ function MenuBar({
       },
       children: /* @__PURE__ */ jsxs15("div", { className: getClassName26("inner"), children: [
         /* @__PURE__ */ jsxs15("div", { className: getClassName26("history"), children: [
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx45(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx46(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx45(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx46(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx45(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx46(Fragment15, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -6589,7 +7078,7 @@ init_react_import();
 var styles_module_default22 = { "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
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
 var HeaderInner = ({
   hidePlugins
@@ -6604,7 +7093,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = useMemo19(() => {
+  const defaultHeaderRender = useMemo20(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -6613,13 +7102,13 @@ var HeaderInner = ({
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx46(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx47(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo19(() => {
+  const defaultHeaderActionsRender = useMemo20(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -6627,7 +7116,7 @@ var HeaderInner = ({
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx46(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx47(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -6639,7 +7128,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState21(false);
+  const [menuOpen, setMenuOpen] = useState20(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -6649,7 +7138,7 @@ var HeaderInner = ({
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback17(
+  const toggleSidebars = useCallback18(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -6663,21 +7152,21 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx46(Fragment15, { children: /* @__PURE__ */ jsx46(CustomHeaderActions, { children: /* @__PURE__ */ jsx46(
+      actions: /* @__PURE__ */ jsx47(Fragment16, { children: /* @__PURE__ */ jsx47(CustomHeaderActions, { children: /* @__PURE__ */ jsx47(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx46(Globe, { size: "14px" }),
+          icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
           children: "Publish"
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsx47(
         "header",
         {
           className: getClassName27({
@@ -6687,7 +7176,7 @@ var HeaderInner = ({
           }),
           children: /* @__PURE__ */ jsxs16("div", { className: getClassName27("inner"), children: [
             /* @__PURE__ */ jsxs16("div", { className: getClassName27("toggle"), children: [
-              /* @__PURE__ */ jsx46("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx47(
                 IconButton,
                 {
                   type: "button",
@@ -6695,10 +7184,10 @@ var HeaderInner = ({
                     toggleSidebars("left");
                   },
                   title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx46(PanelLeft, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx47(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx46("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx47(
                 IconButton,
                 {
                   type: "button",
@@ -6706,19 +7195,19 @@ var HeaderInner = ({
                     toggleSidebars("right");
                   },
                   title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx46(PanelRight, { focusable: "false" })
+                  children: /* @__PURE__ */ jsx47(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx46("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs16(Heading, { rank: "2", size: "xs", children: [
+            /* @__PURE__ */ jsx47("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs16(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ jsxs16(Fragment15, { children: [
+              headerPath && /* @__PURE__ */ jsxs16(Fragment16, { children: [
                 " ",
-                /* @__PURE__ */ jsx46("code", { className: getClassName27("path"), children: headerPath })
+                /* @__PURE__ */ jsx47("code", { className: getClassName27("path"), children: headerPath })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxs16("div", { className: getClassName27("tools"), children: [
-              /* @__PURE__ */ jsx46("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx47(
                 IconButton,
                 {
                   type: "button",
@@ -6726,23 +7215,23 @@ var HeaderInner = ({
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx46(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx46(ChevronDown, { focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ jsx47(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx47(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx46(CustomHeaderActions, { children: /* @__PURE__ */ jsx46(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx47(CustomHeaderActions, { children: /* @__PURE__ */ jsx47(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx46(Globe, { size: "14px" }),
+                      icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
                       children: "Publish"
                     }
                   ) }),
@@ -6766,7 +7255,7 @@ init_react_import();
 var styles_module_default23 = { "SidebarSection": "_SidebarSection_5otpt_1", "SidebarSection-title": "_SidebarSection-title_5otpt_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_5otpt_20", "SidebarSection-content": "_SidebarSection-content_5otpt_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_5otpt_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_5otpt_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_5otpt_33", "SidebarSection-heading": "_SidebarSection-heading_5otpt_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_5otpt_78" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
@@ -6777,40 +7266,40 @@ var SidebarSection = ({
   isLoading
 }) => {
   return /* @__PURE__ */ jsxs17("div", { className: getClassName28({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx47("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName28("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ jsx47(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx47("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx47(Heading, { rank: "2", size: "xs", children: title }) })
+    /* @__PURE__ */ jsx48("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName28("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx48(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx48("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx48(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx47("div", { className: getClassName28("content"), children }),
-    isLoading && /* @__PURE__ */ jsx47("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx47(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx48("div", { className: getClassName28("content"), children }),
+    isLoading && /* @__PURE__ */ jsx48("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx48(Loader, { size: 32 }) })
   ] });
 };
 
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect25,
-  useMemo as useMemo22,
-  useRef as useRef11,
-  useState as useState23
+  useMemo as useMemo23,
+  useRef as useRef13,
+  useState as useState22
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect24, useMemo as useMemo20, useState as useState22 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo21, useState as useState21 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
 var styles_module_default24 = { "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
-import { jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx48(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx48(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx48(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ jsx48(Expand, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx49(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx49(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx49(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ jsx49(Expand, { size: 16 })
 };
 var getClassName29 = get_class_name_factory_default("ViewportControls", styles_module_default24);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
@@ -6821,7 +7310,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx48("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx49(
     IconButton,
     {
       type: "button",
@@ -6829,7 +7318,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ jsx48("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx49("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -6855,7 +7344,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo20(
+  const zoomOptions = useMemo21(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -6867,21 +7356,21 @@ var ViewportControls = ({
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
-  const [activeViewport, setActiveViewport] = useState22(
+  const [activeViewport, setActiveViewport] = useState21(
     uiViewports.current.width
   );
   useEffect24(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
-  const [isExpanded, setIsExpanded] = useState22(false);
+  const [isExpanded, setIsExpanded] = useState21(false);
   return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: getClassName29({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx48("div", { className: getClassName29("actions"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName29("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49("div", { className: getClassName29("actions"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName29("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ jsx49(
             ActionButton,
             {
               title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
@@ -6894,8 +7383,8 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ jsx48("div", { className: getClassName29("divider") }),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49("div", { className: getClassName29("divider") }),
+          /* @__PURE__ */ jsx49(
             ActionButton,
             {
               title: "Zoom viewport out",
@@ -6909,10 +7398,10 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx48(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ jsx49(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             ActionButton,
             {
               title: "Zoom viewport in",
@@ -6926,12 +7415,12 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx48(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ jsx49(ZoomIn, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsxs18("div", { className: getClassName29("zoom"), children: [
-            /* @__PURE__ */ jsx48("div", { className: getClassName29("divider") }),
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx49("div", { className: getClassName29("divider") }),
+            /* @__PURE__ */ jsx49(
               "select",
               {
                 className: getClassName29("zoomSelect"),
@@ -6942,7 +7431,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ jsx48(
+                children: zoomOptions.map((option) => /* @__PURE__ */ jsx49(
                   "option",
                   {
                     value: option.value,
@@ -6954,13 +7443,13 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           "button",
           {
             className: getClassName29("toggleButton"),
             title: "Toggle viewport menu",
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ jsx48(X, { size: 16 }) : /* @__PURE__ */ jsx48(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ jsx49(X, { size: 16 }) : /* @__PURE__ */ jsx49(Monitor, { size: 16 })
           }
         )
       ]
@@ -6973,32 +7462,32 @@ init_react_import();
 var styles_module_default25 = { "PuckCanvas": "_PuckCanvas_t6s9b_1", "PuckCanvas-controls": "_PuckCanvas-controls_t6s9b_17", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_t6s9b_22", "PuckCanvas-inner": "_PuckCanvas-inner_t6s9b_33", "PuckCanvas-root": "_PuckCanvas-root_t6s9b_42", "PuckCanvas--ready": "_PuckCanvas--ready_t6s9b_67", "PuckCanvas-loader": "_PuckCanvas-loader_t6s9b_72", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_t6s9b_82" };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow10 } from "zustand/react/shallow";
+import { useShallow as useShallow9 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 init_react_import();
 import {
   createContext as createContext7,
-  useContext as useContext13,
-  useRef as useRef10,
-  useMemo as useMemo21
+  useContext as useContext14,
+  useRef as useRef12,
+  useMemo as useMemo22
 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef10(null);
-  const value = useMemo21(
+  const frameRef = useRef12(null);
+  const value = useMemo22(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx49(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx50(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = useContext13(FrameContext);
+  const context = useContext14(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -7006,7 +7495,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment16, jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName30 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -7014,11 +7503,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,
@@ -7026,16 +7511,18 @@ var Canvas = () => {
     zoomConfig,
     setZoomConfig,
     status,
-    iframe
+    iframe,
+    _experimentalFullScreenCanvas
   } = useAppStore(
-    useShallow10((s) => ({
+    useShallow9((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 {
@@ -7045,7 +7532,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   } = useAppStore(
-    useShallow10((s) => ({
+    useShallow9((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
@@ -7053,17 +7540,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState23(false);
-  const isResizingRef = useRef11(false);
-  const defaultRender = useMemo22(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx50(Fragment16, { children });
+  const [showTransition, setShowTransition] = useState22(false);
+  const isResizingRef = useRef13(false);
+  const defaultRender = useMemo23(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx51(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo22(
+  const CustomPreview = useMemo23(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback18(() => {
+  const getFrameDimensions = useCallback19(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -7106,7 +7593,7 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = useState23(false);
+  const [showLoader, setShowLoader] = useState22(false);
   useEffect25(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -7178,12 +7665,12 @@ var Canvas = () => {
           dispatch({
             type: "setUi",
             ui: { itemSelector: null },
-            recordHistory: true
+            recordHistory: false
           });
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx50("div", { className: getClassName30("controls"), children: /* @__PURE__ */ jsx50(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx51("div", { className: getClassName30("controls"), children: /* @__PURE__ */ jsx51(
           ViewportControls,
           {
             fullScreen: _experimentalFullScreenCanvas,
@@ -7214,7 +7701,7 @@ var Canvas = () => {
           }
         ) }),
         /* @__PURE__ */ jsxs19("div", { className: getClassName30("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "div",
             {
               className: getClassName30("root"),
@@ -7231,10 +7718,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
+              children: /* @__PURE__ */ jsx51(CustomPreview, { children: /* @__PURE__ */ jsx51(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx51("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx51(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -7243,10 +7730,10 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback19, useEffect as useEffect26, useRef as useRef12, useState as useState24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect26, useRef as useRef14, useState as useState23 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState24(null);
-  const sidebarRef = useRef12(null);
+  const [width, setWidth] = useState23(null);
+  const sidebarRef = useRef14(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
@@ -7280,7 +7767,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback20(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -7327,14 +7814,14 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback20, useRef as useRef13 } from "react";
+import { useCallback as useCallback21, useRef as useRef15 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
 var styles_module_default26 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default26);
 var ResizeHandle = ({
   position,
@@ -7344,11 +7831,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = useRef13(null);
-  const isDragging = useRef13(false);
-  const startX = useRef13(0);
-  const startWidth = useRef13(0);
-  const handleMouseMove = useCallback20(
+  const handleRef = useRef15(null);
+  const isDragging = useRef15(false);
+  const startX = useRef15(0);
+  const startWidth = useRef15(0);
+  const handleMouseMove = useCallback21(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -7359,7 +7846,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback20(() => {
+  const handleMouseUp = useCallback21(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -7375,7 +7862,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback20(
+  const handleMouseDown = useCallback21(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -7393,7 +7880,7 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       ref: handleRef,
@@ -7408,7 +7895,7 @@ init_react_import();
 var styles_module_default27 = { "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
-import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default27);
 var Sidebar = ({
   position,
@@ -7418,8 +7905,8 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs20(Fragment17, { children: [
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs20(Fragment18, { children: [
+    /* @__PURE__ */ jsx53(
       "div",
       {
         ref: sidebarRef,
@@ -7427,7 +7914,7 @@ var Sidebar = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx52("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx53(
       ResizeHandle,
       {
         position,
@@ -7441,7 +7928,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback22 } from "react";
 var isElementVisible = (element) => {
   let current = element;
   while (current && current !== document.body) {
@@ -7476,7 +7963,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback21(
+  const deleteSelectedComponent = useCallback22(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -7508,7 +7995,7 @@ init_react_import();
 var styles_module_default28 = { "Nav": "_Nav_1tvxq_1", "Nav-list": "_Nav-list_1tvxq_5", "Nav-mobileActions": "_Nav-mobileActions_1tvxq_23", "NavItem-link": "_NavItem-link_1tvxq_38", "NavItem": "_NavItem_1tvxq_38", "NavItem-linkIcon": "_NavItem-linkIcon_1tvxq_89", "NavItem--active": "_NavItem--active_1tvxq_94", "NavItem--mobileOnly": "_NavItem--mobileOnly_1tvxq_121", "NavItem--desktopOnly": "_NavItem--desktopOnly_1tvxq_126" };
 
 // components/Puck/components/Nav/index.tsx
-import { jsx as jsx53, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName33 = get_class_name_factory_default("Nav", styles_module_default28);
 var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
 var MenuItem = ({
@@ -7519,7 +8006,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "li",
     {
       className: getClassNameItem3({
@@ -7528,8 +8015,8 @@ var MenuItem = ({
         desktopOnly
       }),
       children: onClick && /* @__PURE__ */ jsxs21("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkLabel"), children: label })
+        icon && /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -7539,13 +8026,13 @@ var Nav = ({
   mobileActions
 }) => {
   return /* @__PURE__ */ jsxs21("nav", { className: getClassName33(), children: [
-    /* @__PURE__ */ jsx53("ul", { className: getClassName33("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx53(MenuItem, __spreadValues({}, item), key)) }),
-    mobileActions && /* @__PURE__ */ jsx53("div", { className: getClassName33("mobileActions"), children: mobileActions })
+    /* @__PURE__ */ jsx54("ul", { className: getClassName33("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx54(MenuItem, __spreadValues({}, item), key)) }),
+    mobileActions && /* @__PURE__ */ jsx54("div", { className: getClassName33("mobileActions"), children: mobileActions })
   ] });
 };
 
 // components/Puck/components/Layout/index.tsx
-import { jsx as jsx54, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs22 } from "react/jsx-runtime";
 var getClassName34 = get_class_name_factory_default("Puck", styles_module_default20);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default20);
 var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default20);
@@ -7556,14 +8043,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__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) });
+  return /* @__PURE__ */ jsx55(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx55(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -7573,7 +8060,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = useMemo23(
+  const iframe = useMemo24(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -7623,11 +8110,11 @@ var Layout = ({ children }) => {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = useMemo23(
+  const CustomPuck = useMemo24(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState25(false);
+  const [mounted, setMounted] = useState24(false);
   useEffect28(() => {
     setMounted(true);
   }, []);
@@ -7656,12 +8143,12 @@ var Layout = ({ children }) => {
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState25("toggle");
-  const hasLegacySideBarPlugin = useMemo23(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState24("toggle");
+  const hasLegacySideBarPlugin = useMemo24(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = useMemo23(() => {
+  const pluginItems = useMemo24(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
@@ -7680,7 +8167,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx55(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -7730,7 +8217,7 @@ var Layout = ({ children }) => {
       id: instanceId,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx54(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx54(CustomPuck, { children: children || /* @__PURE__ */ jsx54(FrameProvider, { children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx55(CustomPuck, { children: children || /* @__PURE__ */ jsx55(FrameProvider, { children: /* @__PURE__ */ jsx55(
           "div",
           {
             className: getLayoutClassName({
@@ -7748,12 +8235,12 @@ var Layout = ({ children }) => {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx54(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx55(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx55(
                     Nav,
                     {
                       items: pluginItems,
-                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx54(
+                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx55(
                         IconButton,
                         {
                           type: "button",
@@ -7763,12 +8250,12 @@ var Layout = ({ children }) => {
                               mobilePanelExpanded: !mobilePanelExpanded
                             });
                           },
-                          children: mobilePanelExpanded ? /* @__PURE__ */ jsx54(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx54(Maximize2, { size: 21 })
+                          children: mobilePanelExpanded ? /* @__PURE__ */ jsx55(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx55(Maximize2, { size: 21 })
                         }
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55(
                     Sidebar,
                     {
                       position: "left",
@@ -7777,20 +8264,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx55(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx54(Render2, {})
+                            children: /* @__PURE__ */ jsx55(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx54(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx55(
                     Sidebar,
                     {
                       position: "right",
@@ -7798,7 +8285,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx55(FieldSideBar, {})
                     }
                   )
                 ]
@@ -7806,19 +8293,19 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx54("div", { id: "puck-portal-root", className: getClassName34("portal") })
+        /* @__PURE__ */ jsx55("div", { id: "puck-portal-root", className: getClassName34("portal") })
       ]
     }
   );
 };
 
 // components/Puck/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx56(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext14(propsContext);
+var usePropsContext = () => useContext15(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -7833,16 +8320,18 @@ function PuckProvider({ children }) {
     initialHistory: _initialHistory,
     metadata,
     onAction,
-    fieldTransforms
+    fieldTransforms,
+    _experimentalFullScreenCanvas,
+    _experimentalVirtualization
   } = usePropsContext();
-  const iframe = useMemo24(
+  const iframe = useMemo25(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState26(() => {
+  const [generatedAppState] = useState25(() => {
     var _a, _b, _c;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -7882,7 +8371,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState26(
+  const [blendedHistories] = useState25(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -7896,7 +8385,7 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = useMemo24(() => {
+  const initialHistoryIndex = useMemo25(() => {
     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;
     }
@@ -7907,7 +8396,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = useMemo24(() => {
+  const loadedFieldTransforms = useMemo25(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -7916,7 +8405,7 @@ function PuckProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback22(
+  const generateAppStore = useCallback23(
     (state) => {
       return {
         instanceId,
@@ -7926,6 +8415,8 @@ function PuckProvider({ children }) {
         overrides: loadedOverrides,
         viewports,
         iframe,
+        _experimentalFullScreenCanvas: !!_experimentalFullScreenCanvas,
+        _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
         fieldTransforms: loadedFieldTransforms
@@ -7939,12 +8430,14 @@ function PuckProvider({ children }) {
       loadedOverrides,
       viewports,
       iframe,
+      _experimentalFullScreenCanvas,
+      _experimentalVirtualization,
       onAction,
       metadata,
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState26(
+  const [appStore] = useState25(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect29(() => {
@@ -7955,13 +8448,13 @@ function PuckProvider({ children }) {
   useEffect29(() => {
     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 = useRef14(null);
+  const previousData = useRef16(null);
   useEffect29(() => {
     return appStore.subscribe(
       (s) => s.state.data,
@@ -7978,12 +8471,14 @@ function PuckProvider({ children }) {
   const uPuckStore = useRegisterUsePuckStore(appStore);
   useEffect29(() => {
     const { resolveAndCommitData } = appStore.getState();
-    resolveAndCommitData();
+    setTimeout(() => {
+      resolveAndCommitData();
+    }, 0);
   }, []);
-  return /* @__PURE__ */ jsx55(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx55(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx56(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx56(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx55(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx56(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(Layout, { children: props.children }) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -7993,12 +8488,12 @@ Puck.Preview = Preview2;
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
   render: () => /* @__PURE__ */ jsxs23("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx56(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx56(Components, {}) }),
-    /* @__PURE__ */ jsx56(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx56(Outline, {}) })
+    /* @__PURE__ */ jsx57(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx57(Components, {}) }),
+    /* @__PURE__ */ jsx57(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx57(Outline, {}) })
   ] })
 });