@measured/puck 0.20.0-canary.88a4251d → 0.20.0-canary.8c56aa8b

package/dist/{chunk-EMTLDPBH.mjs → chunk-5HI4IJHF.mjs}

@@ -93,8 +93,9 @@ var overrideKeys = [
   "headerActions",
   "fields",
   "fieldLabel",
-  "components",
-  "componentItem",
+  "drawer",
+  "drawerItem",
+  "componentOverlay",
   "outline",
   "puck",
   "preview"
@@ -3862,7 +3863,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "DraggableComponent": "_DraggableComponent_qzbgx_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_qzbgx_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_qzbgx_29", "DraggableComponent--hover": "_DraggableComponent--hover_qzbgx_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_qzbgx_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_qzbgx_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_qzbgx_66", "DraggableComponent-actions": "_DraggableComponent-actions_qzbgx_66" };
+var styles_module_default10 = { "DraggableComponent": "_DraggableComponent_1vaqy_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_1vaqy_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_1vaqy_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1vaqy_34", "DraggableComponent--hover": "_DraggableComponent--hover_1vaqy_50", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1vaqy_57", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1vaqy_71", "DraggableComponent-actions": "_DraggableComponent-actions_1vaqy_71" };
 
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
@@ -4002,7 +4003,7 @@ var useOnDragFinished = (cb, deps = []) => {
 };
 
 // components/DraggableComponent/index.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default10);
 var DEBUG2 = false;
 var space = 8;
@@ -4020,6 +4021,9 @@ var DefaultActionBar = ({
   ] }),
   /* @__PURE__ */ jsx20(ActionBar.Group, { children })
 ] });
+var DefaultOverlay = ({
+  children
+}) => /* @__PURE__ */ jsx20(Fragment6, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -4213,9 +4217,16 @@ var DraggableComponent = ({
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
+  const CustomOverlay = useMemo5(
+    () => overrides.componentOverlay || DefaultOverlay,
+    [overrides.componentOverlay]
+  );
   const onClick = useCallback8(
     (e) => {
-      e.stopPropagation();
+      const el = e.target;
+      if (!el.closest("[data-puck-overlay-portal]")) {
+        e.stopPropagation();
+      }
       dispatch({
         type: "setUi",
         ui: {
@@ -4455,7 +4466,16 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+            /* @__PURE__ */ jsx20("div", { className: getClassName16("overlayWrapper"), children: /* @__PURE__ */ jsx20(
+              CustomOverlay,
+              {
+                componentId: id,
+                componentType,
+                hover,
+                isSelected,
+                children: /* @__PURE__ */ jsx20("div", { className: getClassName16("overlay") })
+              }
+            ) })
           ]
         }
       ),
@@ -5595,7 +5615,7 @@ var ContextSlotRender = ({
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default11);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
@@ -5679,13 +5699,14 @@ 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 renderPreview = useMemo8(
     () => function Preview3() {
+      var _a2;
       if (item && "element" in item && item.element) {
         return (
           // Safe to use this since the HTML is set by the user
           /* @__PURE__ */ jsx24("div", { dangerouslySetInnerHTML: { __html: item.element.outerHTML } })
         );
       }
-      return /* @__PURE__ */ jsx24(DrawerItemInner, { name: label, children: overrides.componentItem });
+      return /* @__PURE__ */ jsx24(DrawerItemInner, { name: label, children: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem });
     },
     [componentId, label, overrides]
   );
@@ -5737,7 +5758,7 @@ var DropZoneChild = ({
       autoDragAxis: dragAxis,
       userDragAxis: collisionAxis,
       inDroppableZone,
-      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isInserting ? /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(
         Render2,
         __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
           puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
@@ -6005,9 +6026,9 @@ var DropZone = forwardRef3(
   function DropZone2(props, ref) {
     const ctx = useContext8(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx24(Fragment7, { children: /* @__PURE__ */ jsx24(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -6159,7 +6180,7 @@ import {
   createContext as createContext8,
   useCallback as useCallback21,
   useContext as useContext13,
-  useEffect as useEffect27,
+  useEffect as useEffect28,
   useMemo as useMemo20,
   useRef as useRef11,
   useState as useState24
@@ -6272,12 +6293,12 @@ var styles_module_default15 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields
 // components/Puck/components/Fields/index.tsx
 import { memo as memo2, useCallback as useCallback13, useMemo as useMemo11 } from "react";
 import { useShallow as useShallow6 } from "zustand/react/shallow";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("PuckFields", styles_module_default15);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx27(Fragment7, { children });
+  return /* @__PURE__ */ jsx27(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
   let currentProps;
@@ -6408,7 +6429,7 @@ init_react_import();
 
 // lib/use-component-list.tsx
 init_react_import();
-import { useEffect as useEffect19, useState as useState17 } from "react";
+import { useEffect as useEffect20, useState as useState17 } from "react";
 
 // components/ComponentList/index.tsx
 init_react_import();
@@ -6418,19 +6439,28 @@ init_react_import();
 var styles_module_default16 = { "ComponentList": "_ComponentList_1rrlt_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1rrlt_5", "ComponentList-content": "_ComponentList-content_1rrlt_9", "ComponentList-title": "_ComponentList-title_1rrlt_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1rrlt_53" };
 
 // components/ComponentList/index.tsx
+import { useEffect as useEffect19 } from "react";
 import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("ComponentList", styles_module_default16);
 var ComponentListItem = ({
   name,
   label
 }) => {
+  var _a;
   const overrides = useAppStore((s) => s.overrides);
   const canInsert = useAppStore(
     (s) => s.permissions.getPermissions({
       type: name
     }).insert
   );
-  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: overrides.componentItem });
+  useEffect19(() => {
+    if (overrides.componentItem) {
+      console.warn(
+        "The `componentItem` override has been deprecated and renamed to `drawerItem`"
+      );
+    }
+  }, [overrides]);
+  return /* @__PURE__ */ jsx28(Drawer.Item, { label, name, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -6482,7 +6512,7 @@ var useComponentList = () => {
   const [componentList, setComponentList] = useState17();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
-  useEffect19(() => {
+  useEffect20(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
       const matchedComponents = [];
@@ -6556,25 +6586,32 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const overrides = useAppStore((s) => s.overrides);
   const componentList = useComponentList();
-  const Wrapper = useMemo12(() => overrides.components || "div", [overrides]);
+  const Wrapper = useMemo12(() => {
+    if (overrides.components) {
+      console.warn(
+        "The `components` override has been deprecated and renamed to `drawer`"
+      );
+    }
+    return overrides.components || overrides.drawer || "div";
+  }, [overrides]);
   return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback14, useEffect as useEffect21, useRef as useRef6, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect22, useRef as useRef6, useMemo as useMemo13 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext6,
   useContext as useContext10,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useState as useState18
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6624,7 +6661,7 @@ var CopyHostStyles = ({
   onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
-  useEffect20(() => {
+  useEffect21(() => {
     if (!win || !doc) {
       return () => {
       };
@@ -6781,7 +6818,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx31(Fragment8, { children });
+  return /* @__PURE__ */ jsx31(Fragment9, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext10(autoFrameContext);
@@ -6809,7 +6846,7 @@ function AutoFrame(_a) {
   const [ctx, setCtx] = useState18({});
   const [mountTarget, setMountTarget] = useState18();
   const [stylesLoaded, setStylesLoaded] = useState18(false);
-  useEffect20(() => {
+  useEffect21(() => {
     var _a2;
     if (frameRef.current) {
       const doc = frameRef.current.contentDocument;
@@ -6857,11 +6894,11 @@ init_react_import();
 var styles_module_default17 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment9, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx32 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("PuckPreview", styles_module_default17);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  useEffect21(() => {
+  useEffect22(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -6920,7 +6957,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
       );
       return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadValues({
         id: "puck-root"
-      }, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment9, { children: propsWithSlots.children });
+      }, propsWithSlots)) : /* @__PURE__ */ jsx32(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
@@ -6941,7 +6978,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
       children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
     })
   ) : /* @__PURE__ */ jsx32(Render, { data: renderData, config, metadata });
-  useEffect21(() => {
+  useEffect22(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
@@ -6952,8 +6989,11 @@ var Preview2 = ({ id = "puck-preview" }) => {
       className: getClassName22(),
       id,
       "data-puck-preview": true,
-      onClick: () => {
-        dispatch({ type: "setUi", ui: { itemSelector: null } });
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-puck-component") && !el.hasAttribute("data-puck-dropzone")) {
+          dispatch({ type: "setUi", ui: { itemSelector: null } });
+        }
       },
       children: iframe.enabled ? /* @__PURE__ */ jsx32(
         AutoFrame_default,
@@ -7034,7 +7074,7 @@ var onScrollEnd = (frame, cb) => {
 
 // components/LayerTree/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("LayerTree", styles_module_default18);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default18);
 var Layer = ({
@@ -7170,7 +7210,7 @@ var LayerTree = ({
       }
     )
   );
-  return /* @__PURE__ */ jsxs15(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment11, { children: [
     label && /* @__PURE__ */ jsxs15("div", { className: getClassName23("zoneTitle"), children: [
       /* @__PURE__ */ jsx33("div", { className: getClassName23("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
       label
@@ -7226,7 +7266,7 @@ var Outline = () => {
 init_react_import();
 import {
   useCallback as useCallback16,
-  useEffect as useEffect23,
+  useEffect as useEffect24,
   useMemo as useMemo17,
   useRef as useRef8,
   useState as useState20
@@ -7234,7 +7274,7 @@ import {
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect22, useMemo as useMemo15, useState as useState19 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo15, useState as useState19 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -7258,7 +7298,7 @@ var ViewportButton = ({
 }) => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const [isActive, setIsActive] = useState19(false);
-  useEffect22(() => {
+  useEffect23(() => {
     setIsActive(width === viewports.current.width);
   }, [width, viewports.current.width]);
   return /* @__PURE__ */ jsx35("span", { className: getClassNameButton({ isActive }), children: /* @__PURE__ */ jsx35(
@@ -7416,7 +7456,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName25 = get_class_name_factory_default("PuckCanvas", styles_module_default20);
 var ZOOM_ON_CHANGE = true;
 var Canvas = () => {
@@ -7459,7 +7499,7 @@ var Canvas = () => {
   const [showTransition, setShowTransition] = useState20(false);
   const isResettingZoomRef = useRef8(false);
   const defaultRender = useMemo17(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment11, { children });
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx37(Fragment12, { children });
     return PuckDefault;
   }, []);
   const CustomPreview = useMemo17(
@@ -7474,7 +7514,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  useEffect23(() => {
+  useEffect24(() => {
     resetAutoZoom({
       isResettingRef: isResettingZoomRef,
       setShowTransition,
@@ -7490,7 +7530,7 @@ var Canvas = () => {
     resetAutoZoom,
     viewports
   ]);
-  useEffect23(() => {
+  useEffect24(() => {
     const { height: frameHeight } = getFrameDimensions();
     if (viewports.current.height === "auto") {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), {
@@ -7498,7 +7538,7 @@ var Canvas = () => {
       }));
     }
   }, [zoomConfig.zoom, getFrameDimensions, setZoomConfig]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom({
         isResettingRef: isResettingZoomRef,
@@ -7508,7 +7548,7 @@ var Canvas = () => {
       });
     }
   }, [viewports.current.width, resetAutoZoom, viewports]);
-  useEffect23(() => {
+  useEffect24(() => {
     const cb = () => {
       resetAutoZoom({
         isResettingRef: isResettingZoomRef,
@@ -7522,7 +7562,7 @@ var Canvas = () => {
     };
   }, [resetAutoZoom]);
   const [showLoader, setShowLoader] = useState20(false);
-  useEffect23(() => {
+  useEffect24(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
@@ -7534,11 +7574,16 @@ var Canvas = () => {
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader
       }),
-      onClick: () => dispatch({
-        type: "setUi",
-        ui: { itemSelector: null },
-        recordHistory: true
-      }),
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-puck-component") && !el.hasAttribute("data-puck-dropzone")) {
+          dispatch({
+            type: "setUi",
+            ui: { itemSelector: null },
+            recordHistory: true
+          });
+        }
+      },
       children: [
         viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx37("div", { className: getClassName25("controls"), children: /* @__PURE__ */ jsx37(
           ViewportControls,
@@ -7648,19 +7693,19 @@ var useLoadedOverrides = ({
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx38 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment12, { children });
+import { Fragment as Fragment13, jsx as jsx38 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx38(Fragment13, { children });
 
 // lib/use-inject-css.ts
 init_react_import();
-import { useEffect as useEffect24, useState as useState21 } from "react";
+import { useEffect as useEffect25, useState as useState21 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
   const [el, setEl] = useState21();
-  useEffect24(() => {
+  useEffect25(() => {
     setEl(document.createElement("style"));
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     var _a;
     if (!el || typeof window === "undefined") {
       return;
@@ -7711,7 +7756,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 Fragment13, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
 function MenuBar({
   menuOpen = false,
@@ -7759,7 +7804,7 @@ function MenuBar({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx39(Fragment13, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx39(Fragment14, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -7770,7 +7815,7 @@ init_react_import();
 var styles_module_default22 = { "PuckHeader": "_PuckHeader_15xnq_1", "PuckHeader-inner": "_PuckHeader-inner_15xnq_10", "PuckHeader-toggle": "_PuckHeader-toggle_15xnq_20", "PuckHeader--rightSideBarVisible": "_PuckHeader--rightSideBarVisible_15xnq_27", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_15xnq_27", "PuckHeader--leftSideBarVisible": "_PuckHeader--leftSideBarVisible_15xnq_28", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_15xnq_28", "PuckHeader-title": "_PuckHeader-title_15xnq_32", "PuckHeader-path": "_PuckHeader-path_15xnq_36", "PuckHeader-tools": "_PuckHeader-tools_15xnq_43", "PuckHeader-menuButton": "_PuckHeader-menuButton_15xnq_49", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_15xnq_54" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
 var HeaderInner = () => {
   const {
@@ -7845,7 +7890,7 @@ var HeaderInner = () => {
   return /* @__PURE__ */ jsx40(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx40(Fragment14, { children: /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
+      actions: /* @__PURE__ */ jsx40(Fragment15, { children: /* @__PURE__ */ jsx40(CustomHeaderActions, { children: /* @__PURE__ */ jsx40(
         Button,
         {
           onClick: () => {
@@ -7887,7 +7932,7 @@ var HeaderInner = () => {
             ] }),
             /* @__PURE__ */ jsx40("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs19(Heading, { rank: "2", size: "xs", children: [
               headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ jsxs19(Fragment14, { children: [
+              headerPath && /* @__PURE__ */ jsxs19(Fragment15, { children: [
                 " ",
                 /* @__PURE__ */ jsx40("code", { className: getClassName27("path"), children: headerPath })
               ] })
@@ -8019,7 +8064,7 @@ init_react_import();
 var styles_module_default24 = { "Sidebar": "_Sidebar_1xksb_1", "Sidebar--left": "_Sidebar--left_1xksb_8", "Sidebar--right": "_Sidebar--right_1xksb_14", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1xksb_20" };
 
 // components/Puck/components/Sidebar/index.tsx
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName29 = get_class_name_factory_default("Sidebar", styles_module_default24);
 var Sidebar = ({
   position,
@@ -8031,7 +8076,7 @@ var Sidebar = ({
   children
 }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs20(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment16, { children: [
     /* @__PURE__ */ jsx42("div", { ref: sidebarRef, className: getClassName29({ [position]: true }), children }),
     /* @__PURE__ */ jsx42("div", { className: `${getClassName29("resizeHandle")}`, children: /* @__PURE__ */ jsx42(
       ResizeHandle,
@@ -8047,14 +8092,14 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback20, useEffect as useEffect26, useRef as useRef10, useState as useState23 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect27, useRef as useRef10, useState as useState23 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState23(null);
   const sidebarRef = useRef10(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  useEffect26(() => {
+  useEffect27(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -8078,7 +8123,7 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
@@ -8194,7 +8239,7 @@ function PuckProvider({ children }) {
       }
     }
     if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_g = initialData == null ? void 0 : initialData.root) == null ? void 0 : _g.props)) {
-      console.error(
+      console.warn(
         "Warning: Defining props on `root` is deprecated. Please use `root.props`, or republish this page to migrate automatically."
       );
     }
@@ -8272,12 +8317,12 @@ function PuckProvider({ children }) {
   const [appStore] = useState24(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect27(() => {
+  useEffect28(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect27(() => {
+  useEffect28(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -8287,7 +8332,7 @@ function PuckProvider({ children }) {
     initialAppState
   });
   const previousData = useRef11(null);
-  useEffect27(() => {
+  useEffect28(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -8301,7 +8346,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  useEffect27(() => {
+  useEffect28(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -8338,7 +8383,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -8367,12 +8412,12 @@ function PuckLayout({ children }) {
     [overrides]
   );
   const [mounted, setMounted] = useState24(false);
-  useEffect27(() => {
+  useEffect28(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect27(() => {
+  useEffect28(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -8447,6 +8492,36 @@ Puck.Fields = Fields;
 Puck.Outline = Outline;
 Puck.Preview = Preview2;
 
+// lib/overlay-portal/index.tsx
+init_react_import();
+var registerOverlayPortal = (el, opts = {}) => {
+  if (!el) return;
+  const { disableDrag = true } = opts;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  el.addEventListener("mouseover", stopPropagation, {
+    capture: true
+  });
+  if (disableDrag) {
+    el.addEventListener("pointerdown", stopPropagation, {
+      capture: true
+    });
+  }
+  el.setAttribute("data-puck-overlay-portal", "true");
+  return () => {
+    el.removeEventListener("mouseover", stopPropagation, {
+      capture: true
+    });
+    if (disableDrag) {
+      el.removeEventListener("pointerdown", stopPropagation, {
+        capture: true
+      });
+    }
+    el.removeAttribute("data-puck-overlay-portal");
+  };
+};
+
 // bundle/core.ts
 init_react_import();
 
@@ -8497,7 +8572,8 @@ export {
   createUsePuck,
   usePuck,
   useGetPuck,
-  Puck
+  Puck,
+  registerOverlayPortal
 };
 /*! Bundled license information: