@measured/puck 0.18.1 → 0.18.2-canary.23c8dda

package/dist/index.mjs

@@ -159,7 +159,7 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "ActionBar": "_ActionBar_194sn_1", "ActionBar-label": "_ActionBar-label_194sn_18", "ActionBar-action": "_ActionBar-action_194sn_30", "ActionBar-group": "_ActionBar-group_194sn_38" };
+var styles_module_default = { "ActionBar": "_ActionBar_rvadt_1", "ActionBar-label": "_ActionBar-label_rvadt_18", "ActionBar-action": "_ActionBar-action_rvadt_30", "ActionBar-group": "_ActionBar-group_rvadt_38" };
 
 // components/ActionBar/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -205,7 +205,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "InputWrapper": "_InputWrapper_1h1p1_1", "Input-label": "_Input-label_1h1p1_5", "Input-labelIcon": "_Input-labelIcon_1h1p1_14", "Input-disabledIcon": "_Input-disabledIcon_1h1p1_21", "Input-input": "_Input-input_1h1p1_26", "Input": "_Input_1h1p1_1", "Input--readOnly": "_Input--readOnly_1h1p1_70", "Input-radioGroupItems": "_Input-radioGroupItems_1h1p1_81", "Input-radio": "_Input-radio_1h1p1_81", "Input-radioInner": "_Input-radioInner_1h1p1_98", "Input-radioInput": "_Input-radioInput_1h1p1_143" };
+var styles_module_default2 = { "InputWrapper": "_InputWrapper_g5w3n_1", "Input-label": "_Input-label_g5w3n_5", "Input-labelIcon": "_Input-labelIcon_g5w3n_14", "Input-disabledIcon": "_Input-disabledIcon_g5w3n_21", "Input-input": "_Input-input_g5w3n_26", "Input": "_Input_g5w3n_1", "Input--readOnly": "_Input--readOnly_g5w3n_74", "Input-radioGroupItems": "_Input-radioGroupItems_g5w3n_85", "Input-radio": "_Input-radio_g5w3n_85", "Input-radioInner": "_Input-radioInner_g5w3n_102", "Input-radioInput": "_Input-radioInput_g5w3n_147" };
 
 // components/AutoField/index.tsx
 import {
@@ -1570,7 +1570,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_8wgzm_1", "ExternalInput-button": "_ExternalInput-button_8wgzm_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_8wgzm_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_8wgzm_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_8wgzm_35", "ExternalInput": "_ExternalInput_8wgzm_1", "ExternalInputModal": "_ExternalInputModal_8wgzm_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_8wgzm_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_8wgzm_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_8wgzm_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_8wgzm_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_8wgzm_133", "ExternalInputModal-table": "_ExternalInputModal-table_8wgzm_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_8wgzm_149", "ExternalInputModal-th": "_ExternalInputModal-th_8wgzm_149", "ExternalInputModal-td": "_ExternalInputModal-td_8wgzm_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_8wgzm_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_8wgzm_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_8wgzm_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_8wgzm_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_8wgzm_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_8wgzm_227", "ExternalInputModal-search": "_ExternalInputModal-search_8wgzm_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_8wgzm_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_8wgzm_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_8wgzm_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_8wgzm_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_8wgzm_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_8wgzm_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_8wgzm_330" };
+var styles_module_default6 = { "ExternalInput-actions": "_ExternalInput-actions_1ibts_1", "ExternalInput-button": "_ExternalInput-button_1ibts_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_1ibts_24", "ExternalInput--readOnly": "_ExternalInput--readOnly_1ibts_31", "ExternalInput-detachButton": "_ExternalInput-detachButton_1ibts_35", "ExternalInput": "_ExternalInput_1ibts_1", "ExternalInputModal": "_ExternalInputModal_1ibts_79", "ExternalInputModal-grid": "_ExternalInputModal-grid_1ibts_89", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_1ibts_100", "ExternalInputModal-filters": "_ExternalInputModal-filters_1ibts_105", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_1ibts_124", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_1ibts_133", "ExternalInputModal-table": "_ExternalInputModal-table_1ibts_133", "ExternalInputModal-thead": "_ExternalInputModal-thead_1ibts_149", "ExternalInputModal-th": "_ExternalInputModal-th_1ibts_149", "ExternalInputModal-td": "_ExternalInputModal-td_1ibts_164", "ExternalInputModal-tr": "_ExternalInputModal-tr_1ibts_169", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_1ibts_176", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_1ibts_202", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_1ibts_206", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_1ibts_223", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_1ibts_227", "ExternalInputModal-search": "_ExternalInputModal-search_1ibts_227", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_1ibts_264", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_1ibts_289", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_1ibts_299", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_1ibts_313", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_1ibts_326", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_1ibts_330", "ExternalInputModal-footer": "_ExternalInputModal-footer_1ibts_330" };
 
 // components/Modal/index.tsx
 init_react_import();
@@ -1641,7 +1641,7 @@ import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
-var Button_module_default = { "Button": "_Button_1t64k_1", "Button--medium": "_Button--medium_1t64k_29", "Button--large": "_Button--large_1t64k_37", "Button-icon": "_Button-icon_1t64k_44", "Button--primary": "_Button--primary_1t64k_48", "Button--secondary": "_Button--secondary_1t64k_67", "Button--flush": "_Button--flush_1t64k_84", "Button--disabled": "_Button--disabled_1t64k_88", "Button--fullWidth": "_Button--fullWidth_1t64k_95", "Button-spinner": "_Button-spinner_1t64k_100" };
+var Button_module_default = { "Button": "_Button_10byl_1", "Button--medium": "_Button--medium_10byl_29", "Button--large": "_Button--large_10byl_37", "Button-icon": "_Button-icon_10byl_44", "Button--primary": "_Button--primary_10byl_48", "Button--secondary": "_Button--secondary_10byl_67", "Button--flush": "_Button--flush_10byl_84", "Button--disabled": "_Button--disabled_10byl_88", "Button--fullWidth": "_Button--fullWidth_10byl_95", "Button-spinner": "_Button-spinner_10byl_100" };
 
 // lib/filter-data-attrs.ts
 init_react_import();
@@ -3804,6 +3804,7 @@ var DropZoneRender = forwardRef3(
     }) });
   }
 );
+var DropZonePure = (props) => /* @__PURE__ */ jsx22(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef3(
   function DropZone2(props, ref) {
     const ctx = useContext6(dropZoneContext);
@@ -3910,6 +3911,25 @@ var GlobalPosition = class {
   }
 };
 
+// lib/bubble-pointer-event.ts
+init_react_import();
+var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
+var BubbledPointerEvent = class extends BaseEvent {
+  constructor(type, data) {
+    super(type, data);
+    this._originalTarget = null;
+    this.originalTarget = data.originalTarget;
+  }
+  // Necessary for Firefox
+  set originalTarget(target) {
+    this._originalTarget = target;
+  }
+  // Necessary for Firefox
+  get originalTarget() {
+    return this._originalTarget;
+  }
+};
+
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -4034,7 +4054,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     const cleanupEffect = effects(() => {
       const handleMove = (event) => {
-        const target = event.originalTarget || event.target;
+        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
         const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
@@ -4743,6 +4763,19 @@ function patchWindow(window2) {
 
 // components/DragDropContext/index.tsx
 import { createStore as createStore3 } from "zustand";
+
+// lib/get-deep-dir.ts
+init_react_import();
+function getDeepDir(el) {
+  function findDir(node) {
+    if (!node) return "ltr";
+    const d = node.getAttribute("dir");
+    return d || findDir(node.parentElement);
+  }
+  return el ? findDir(el) : "ltr";
+}
+
+// components/DragDropContext/index.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var DEBUG3 = false;
 var dragListenerContext = createContext4({
@@ -5036,7 +5069,8 @@ var DragDropContextClient = ({
               targetZone = targetData.zone;
               targetIndex = targetData.index;
               const collisionData = (_c = (_b = manager.dragOperation.data) == null ? void 0 : _b.collisionMap) == null ? void 0 : _c[targetId];
-              const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || (collisionData == null ? void 0 : collisionData.direction) === "left" ? "before" : "after";
+              const dir = getDeepDir(target.element);
+              const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || dir === "ltr" && (collisionData == null ? void 0 : collisionData.direction) === "left" || dir === "rtl" && (collisionData == null ? void 0 : collisionData.direction) === "right" ? "before" : "after";
               if (targetIndex >= sourceIndex && sourceZone === targetZone) {
                 targetIndex = targetIndex - 1;
               }
@@ -5306,7 +5340,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "SidebarSection-title": "_SidebarSection-title_125qe_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_125qe_20", "SidebarSection-content": "_SidebarSection-content_125qe_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_125qe_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_125qe_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_125qe_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_125qe_41", "SidebarSection-heading": "_SidebarSection-heading_125qe_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_125qe_86" };
+var styles_module_default13 = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -5485,7 +5519,7 @@ function MenuBar({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "Puck": "_Puck_12s9r_19", "Puck-portal": "_Puck-portal_12s9r_24", "PuckLayout-inner": "_PuckLayout-inner_12s9r_31", "PuckLayout--mounted": "_PuckLayout--mounted_12s9r_43", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_12s9r_47", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_12s9r_53", "PuckLayout-mounted": "_PuckLayout-mounted_12s9r_67", "PuckLayout": "_PuckLayout_12s9r_31", "PuckLayout-header": "_PuckLayout-header_12s9r_108", "PuckLayout-headerInner": "_PuckLayout-headerInner_12s9r_117", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_12s9r_127", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_12s9r_134", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_12s9r_135", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_12s9r_139", "PuckLayout-headerPath": "_PuckLayout-headerPath_12s9r_143", "PuckLayout-headerTools": "_PuckLayout-headerTools_12s9r_150", "PuckLayout-menuButton": "_PuckLayout-menuButton_12s9r_156", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_12s9r_161", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_12s9r_135", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_12s9r_134" };
+var styles_module_default15 = { "Puck": "_Puck_11o75_19", "Puck-portal": "_Puck-portal_11o75_24", "PuckLayout-inner": "_PuckLayout-inner_11o75_31", "PuckLayout--mounted": "_PuckLayout--mounted_11o75_43", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_11o75_47", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_11o75_53", "PuckLayout-mounted": "_PuckLayout-mounted_11o75_67", "PuckLayout": "_PuckLayout_11o75_31", "PuckLayout-header": "_PuckLayout-header_11o75_108", "PuckLayout-headerInner": "_PuckLayout-headerInner_11o75_117", "PuckLayout-headerToggle": "_PuckLayout-headerToggle_11o75_127", "PuckLayout-rightSideBarToggle": "_PuckLayout-rightSideBarToggle_11o75_134", "PuckLayout-leftSideBarToggle": "_PuckLayout-leftSideBarToggle_11o75_135", "PuckLayout-headerTitle": "_PuckLayout-headerTitle_11o75_139", "PuckLayout-headerPath": "_PuckLayout-headerPath_11o75_143", "PuckLayout-headerTools": "_PuckLayout-headerTools_11o75_150", "PuckLayout-menuButton": "_PuckLayout-menuButton_11o75_156", "PuckLayout--menuOpen": "_PuckLayout--menuOpen_11o75_161", "PuckLayout-leftSideBar": "_PuckLayout-leftSideBar_11o75_135", "PuckLayout-rightSideBar": "_PuckLayout-rightSideBar_11o75_134" };
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -5547,7 +5581,10 @@ var selectorIs = (a, b) => (a == null ? void 0 : a.zone) === (b == null ? void 0
 var defaultPageFields = {
   title: { type: "text" }
 };
-var useResolvedFields = () => {
+var useResolvedFields = ({
+  _skipValueCheck,
+  _skipIdCheck
+} = {}) => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
   const parent = useParent();
@@ -5560,11 +5597,17 @@ var useResolvedFields = () => {
   );
   const rootProps = data.root.props || data.root;
   const [lastSelectedData, setLastSelectedData] = useState19({});
-  const [resolvedFields, setResolvedFields] = useState19(defaultFields);
+  const [resolvedFields, setResolvedFields] = useState19({
+    fields: defaultFields,
+    id: selectedItem == null ? void 0 : selectedItem.props.id
+  });
   const [fieldsLoading, setFieldsLoading] = useState19(false);
   const lastFields = useRef5(defaultFields);
   const defaultResolveFields = (_componentData, _params) => defaultFields;
-  const componentData = selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly };
+  const componentData = useMemo11(
+    () => selectedItem ? selectedItem : { props: rootProps, readOnly: data.root.readOnly || {} },
+    [selectedItem, rootProps, data.root.readOnly]
+  );
   const hasComponentResolver = selectedItem && (componentConfig == null ? void 0 : componentConfig.resolveFields);
   const hasRootResolver = !selectedItem && ((_b = config.root) == null ? void 0 : _b.resolveFields);
   const hasResolver = hasComponentResolver || hasRootResolver;
@@ -5612,15 +5655,25 @@ var useResolvedFields = () => {
       if (hasResolver) {
         setFieldsLoading(true);
         resolveFields(defaultFields).then((fields) => {
-          setResolvedFields(fields || {});
+          setResolvedFields({
+            fields: fields || {},
+            id: selectedItem == null ? void 0 : selectedItem.props.id
+          });
           lastFields.current = fields;
           setFieldsLoading(false);
         });
         return;
       }
     }
-    setResolvedFields(defaultFields);
-  }, [defaultFields, state.ui.itemSelector, hasResolver, parent]);
+    setResolvedFields({ fields: defaultFields, id: selectedItem == null ? void 0 : selectedItem.props.id });
+  }, [
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    parent,
+    resolveFields
+  ]);
   useOnValueChange(
     state.ui.itemSelector,
     () => {
@@ -5631,6 +5684,7 @@ var useResolvedFields = () => {
   useOnValueChange(
     { data, parent, itemSelector: state.ui.itemSelector },
     () => {
+      if (_skipValueCheck) return;
       triggerResolver();
     },
     (a, b) => JSON.stringify(a) === JSON.stringify(b)
@@ -5638,7 +5692,10 @@ var useResolvedFields = () => {
   useEffect17(() => {
     triggerResolver();
   }, []);
-  return [resolvedFields, fieldsLoading];
+  if (resolvedFields.id !== (selectedItem == null ? void 0 : selectedItem.props.id) && !_skipIdCheck) {
+    return [defaultFields, fieldsLoading];
+  }
+  return [resolvedFields.fields, fieldsLoading];
 };
 
 // components/Puck/components/Fields/index.tsx
@@ -5795,7 +5852,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "ComponentList": "_ComponentList_odh9d_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_odh9d_5", "ComponentList-content": "_ComponentList-content_odh9d_9", "ComponentList-title": "_ComponentList-title_odh9d_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_odh9d_53" };
+var styles_module_default17 = { "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 { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -6233,13 +6290,14 @@ function Render({
           config.root.render,
           __spreadProps(__spreadValues({}, rootProps), {
             puck: {
-              renderDropZone: DropZone,
-              isEditing: false
+              renderDropZone: DropZonePure,
+              isEditing: false,
+              dragRef: null
             },
             title,
             editMode: false,
             id: "puck-root",
-            children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+            children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
           })
         )
       }
@@ -6255,7 +6313,7 @@ function Render({
         depth: 0,
         path: []
       },
-      children: /* @__PURE__ */ jsx32(DropZone, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx32(DropZonePure, { zone: rootDroppableId })
     }
   );
 }
@@ -6269,21 +6327,8 @@ var useBubbleIframeEvents = (ref) => {
     var _a;
     if (ref.current && status === "READY") {
       const iframe = ref.current;
-      class BubbledPointerEventClass extends PointerEvent {
-        constructor(type, data) {
-          super(type, data);
-          this._originalTarget = null;
-          this.originalTarget = data.originalTarget;
-        }
-        set originalTarget(target) {
-          this._originalTarget = target;
-        }
-        get originalTarget() {
-          return this._originalTarget;
-        }
-      }
       const handlePointerMove = (event) => {
-        const evt = new BubbledPointerEventClass("pointermove", __spreadProps(__spreadValues({}, event), {
+        const evt = new BubbledPointerEvent("pointermove", __spreadProps(__spreadValues({}, event), {
           bubbles: true,
           cancelable: false,
           clientX: event.clientX,
@@ -6328,12 +6373,12 @@ var Preview2 = ({ id = "puck-preview" }) => {
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       puck: {
-        renderDropZone: DropZone,
+        renderDropZone: DropZonePure,
         isEditing: true,
         dragRef: null
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx33(DropZone, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx33(DropZonePure, { zone: rootDroppableId })
     })
   ) : /* @__PURE__ */ jsx33(Render, { data: state.data, config });
   return /* @__PURE__ */ jsx33(
@@ -6405,7 +6450,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "LayerTree": "_LayerTree_1pgw8_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1pgw8_11", "LayerTree-helper": "_LayerTree-helper_1pgw8_17", "Layer": "_Layer_1pgw8_1", "Layer-inner": "_Layer-inner_1pgw8_29", "Layer--containsZone": "_Layer--containsZone_1pgw8_35", "Layer-clickable": "_Layer-clickable_1pgw8_39", "Layer--isSelected": "_Layer--isSelected_1pgw8_61", "Layer-chevron": "_Layer-chevron_1pgw8_77", "Layer--childIsSelected": "_Layer--childIsSelected_1pgw8_78", "Layer-zones": "_Layer-zones_1pgw8_82", "Layer-title": "_Layer-title_1pgw8_96", "Layer-name": "_Layer-name_1pgw8_105", "Layer-icon": "_Layer-icon_1pgw8_111", "Layer-zoneIcon": "_Layer-zoneIcon_1pgw8_116" };
+var styles_module_default19 = { "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();
@@ -6887,7 +6932,7 @@ import { useEffect as useEffect21, useMemo as useMemo16, useState as useState23
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "ViewportControls": "_ViewportControls_g1wgg_1", "ViewportControls-divider": "_ViewportControls-divider_g1wgg_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_g1wgg_21", "ViewportButton--isActive": "_ViewportButton--isActive_g1wgg_34", "ViewportButton-inner": "_ViewportButton-inner_g1wgg_34" };
+var styles_module_default20 = { "ViewportControls": "_ViewportControls_gejzr_1", "ViewportControls-divider": "_ViewportControls-divider_gejzr_15", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gejzr_21", "ViewportButton--isActive": "_ViewportButton--isActive_gejzr_38", "ViewportButton-inner": "_ViewportButton-inner_gejzr_38" };
 
 // components/ViewportControls/index.tsx
 import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -7302,6 +7347,11 @@ var usePreviewModeHotkeys = (dispatch, iframeEnabled) => {
     preventDefault: true,
     document: resolvedFrame
   });
+  useHotkeys2("ctrl+i", toggleInteractive, { preventDefault: true });
+  useHotkeys2("ctrl+i", toggleInteractiveIframe, {
+    preventDefault: true,
+    document: resolvedFrame
+  });
 };
 
 // components/Puck/index.tsx
@@ -7776,14 +7826,12 @@ export {
   Button,
   Drawer,
   DropZone,
-  DropZoneProvider,
   FieldLabel,
   Group,
   IconButton,
   Label,
   Puck,
   Render,
-  dropZoneContext,
   migrate,
   overrideKeys,
   resolveAllData,

package/dist/{resolve-all-data-DzJEE28m.d.mts → resolve-all-data-C-cc7ftj.d.mts}

@@ -182,7 +182,7 @@ type Config<Props extends DefaultComponentProps = DefaultComponentProps, RootPro
     components: {
         [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
     };
-    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
+    root?: Partial<ComponentConfig<WithChildren<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
 };
 
 type WithId<Props> = Props & {
@@ -459,4 +459,4 @@ type PuckAction = {
 
 declare function resolveAllData<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends Record<string, any> = DefaultRootFieldProps>(data: Partial<Data>, config: Config, onResolveStart?: (item: ComponentData) => void, onResolveEnd?: (item: ComponentData) => void): Promise<Data<Props, RootProps>>;
 
-export { type PuckContext as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type FieldProps as F, type BaseField as G, type History as H, type ItemSelector as I, type TextareaField as J, type RadioField as K, type ArrayField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type ObjectField as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type Adaptor as W, type ExternalFieldWithAdaptor as X, type ExternalField as Y, type CustomField as Z, type Fields as _, type Field as a, type DefaultRootRenderProps as a0, type DefaultRootProps as a1, type WithId as a2, type WithPuckProps as a3, type AsFieldProps as a4, type WithChildren as a5, resolveAllData as a6, type DropZoneProps as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type IframeConfig as g, type InitialHistory as h, type DefaultComponentProps as i, type DefaultRootFieldProps as j, type ExtractRootPropsFromConfig as k, type ComponentDataMap as l, type Direction as m, type DragAxis as n, type Viewport as o, overrideKeys as p, type OverrideKey as q, type FieldRenderFunctions as r, type ItemWithId as s, type ArrayState as t, type PuckComponent as u, type ComponentConfig as v, type RootDataWithoutProps as w, type RootData as x, type ComponentData as y, type Content as z };
+export { type DefaultRootRenderProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type TextareaField as G, type History as H, type IframeConfig as I, type RadioField as J, type ArrayField as K, type ObjectField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type Adaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalFieldWithAdaptor as W, type ExternalField as X, type CustomField as Y, type Fields as Z, type PuckContext as _, type Field as a, type DefaultRootProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, resolveAllData as a5, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ExtractRootPropsFromConfig as j, type ComponentDataMap as k, type Direction as l, type DragAxis as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type ComponentData as x, type Content as y, type BaseField as z };

package/dist/{resolve-all-data-DzJEE28m.d.ts → resolve-all-data-C-cc7ftj.d.ts}

@@ -182,7 +182,7 @@ type Config<Props extends DefaultComponentProps = DefaultComponentProps, RootPro
     components: {
         [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
     };
-    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
+    root?: Partial<ComponentConfig<WithChildren<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
 };
 
 type WithId<Props> = Props & {
@@ -459,4 +459,4 @@ type PuckAction = {
 
 declare function resolveAllData<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends Record<string, any> = DefaultRootFieldProps>(data: Partial<Data>, config: Config, onResolveStart?: (item: ComponentData) => void, onResolveEnd?: (item: ComponentData) => void): Promise<Data<Props, RootProps>>;
 
-export { type PuckContext as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type FieldProps as F, type BaseField as G, type History as H, type ItemSelector as I, type TextareaField as J, type RadioField as K, type ArrayField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type ObjectField as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type Adaptor as W, type ExternalFieldWithAdaptor as X, type ExternalField as Y, type CustomField as Z, type Fields as _, type Field as a, type DefaultRootRenderProps as a0, type DefaultRootProps as a1, type WithId as a2, type WithPuckProps as a3, type AsFieldProps as a4, type WithChildren as a5, resolveAllData as a6, type DropZoneProps as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type IframeConfig as g, type InitialHistory as h, type DefaultComponentProps as i, type DefaultRootFieldProps as j, type ExtractRootPropsFromConfig as k, type ComponentDataMap as l, type Direction as m, type DragAxis as n, type Viewport as o, overrideKeys as p, type OverrideKey as q, type FieldRenderFunctions as r, type ItemWithId as s, type ArrayState as t, type PuckComponent as u, type ComponentConfig as v, type RootDataWithoutProps as w, type RootData as x, type ComponentData as y, type Content as z };
+export { type DefaultRootRenderProps as $, type AppState as A, type BaseData as B, type Config as C, type DropZoneProps as D, type ExtractPropsFromConfig as E, type FieldProps as F, type TextareaField as G, type History as H, type IframeConfig as I, type RadioField as J, type ArrayField as K, type ObjectField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type Permissions as P, type Adaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalFieldWithAdaptor as W, type ExternalField as X, type CustomField as Y, type Fields as Z, type PuckContext as _, type Field as a, type DefaultRootProps as a0, type WithId as a1, type WithPuckProps as a2, type AsFieldProps as a3, type WithChildren as a4, resolveAllData as a5, type Data as b, type UiState as c, type Plugin as d, type Overrides as e, type PuckAction as f, type InitialHistory as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ExtractRootPropsFromConfig as j, type ComponentDataMap as k, type Direction as l, type DragAxis as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type ComponentData as x, type Content as y, type BaseField as z };

package/dist/rsc.d.mts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-DzJEE28m.mjs';
-export { a6 as resolveAllData } from './resolve-all-data-DzJEE28m.mjs';
+import { C as Config, U as UserGenerics } from './resolve-all-data-C-cc7ftj.mjs';
+export { a5 as resolveAllData } from './resolve-all-data-C-cc7ftj.mjs';
 import 'react';
 
-declare function Render<UserConfig extends Config = Config>({ config, data, }: {
+declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data }: {
     config: UserConfig;
-    data: Data;
+    data: G["UserData"];
 }): react_jsx_runtime.JSX.Element;
 
 export { Render };

package/dist/rsc.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './resolve-all-data-DzJEE28m.js';
-export { a6 as resolveAllData } from './resolve-all-data-DzJEE28m.js';
+import { C as Config, U as UserGenerics } from './resolve-all-data-C-cc7ftj.js';
+export { a5 as resolveAllData } from './resolve-all-data-C-cc7ftj.js';
 import 'react';
 
-declare function Render<UserConfig extends Config = Config>({ config, data, }: {
+declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data }: {
     config: UserConfig;
-    data: Data;
+    data: G["UserData"];
 }): react_jsx_runtime.JSX.Element;
 
 export { Render };

package/dist/rsc.js

@@ -131,10 +131,7 @@ function DropZoneRender({
     return null;
   }) });
 }
-function Render({
-  config,
-  data
-}) {
+function Render({ config, data }) {
   var _a;
   if ((_a = config.root) == null ? void 0 : _a.render) {
     const rootProps = data.root.props || data.root;
@@ -144,7 +141,8 @@ function Render({
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
           renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropZoneRender, { zone, data, config }),
-          isEditing: false
+          isEditing: false,
+          dragRef: null
         },
         title,
         editMode: false,

package/dist/rsc.mjs

@@ -52,10 +52,7 @@ function DropZoneRender({
     return null;
   }) });
 }
-function Render({
-  config,
-  data
-}) {
+function Render({ config, data }) {
   var _a;
   if ((_a = config.root) == null ? void 0 : _a.render) {
     const rootProps = data.root.props || data.root;
@@ -65,7 +62,8 @@ function Render({
       __spreadProps(__spreadValues({}, rootProps), {
         puck: {
           renderDropZone: ({ zone }) => /* @__PURE__ */ jsx(DropZoneRender, { zone, data, config }),
-          isEditing: false
+          isEditing: false,
+          dragRef: null
         },
         title,
         editMode: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.18.1",
+  "version": "0.18.2-canary.23c8dda",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -68,8 +68,8 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@dnd-kit/helpers": "0.0.6-beta-20250124180624",
-    "@dnd-kit/react": "0.0.6-beta-20250124180624",
+    "@dnd-kit/helpers": "0.0.7-beta-20250130032138",
+    "@dnd-kit/react": "0.0.7-beta-20250130032138",
     "deep-diff": "^1.0.2",
     "object-hash": "^3.0.0",
     "react-hotkeys-hook": "^4.6.1",