@measured/puck 0.18.0-canary.1ea6f98 → 0.18.0-canary.30f9a92

package/README.md

@@ -101,11 +101,11 @@ Available recipes include:
 - [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
 - [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more
 
-## Hire the Puck team
+## Get support
 
-Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
+If you have any questions about Puck, please open a [GitHub issue](https://github.com/measuredco/puck/issues) or join us on [Discord](https://discord.gg/D9e4E3MQVZ).
 
-If you need support integrating Puck or creating a beautiful component library, please reach out via the [Measured](https://measured.co) website.
+Or [book a discovery call](https://app.cal.com/chrisvxd/puck-enquiry/) for hands-on support and consultancy.
 
 ## License
 

package/dist/index.css

@@ -224,27 +224,10 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._InputWrapper_1l5m8_1 {
-  color: var(--puck-color-grey-04);
-  padding: 16px;
-  padding-bottom: 12px;
-  display: block;
-}
-._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
-}
-._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
-  padding: 0px;
-}
-._Input_1l5m8_1 * {
-  box-sizing: border-box;
-}
-._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
-  border-top: 0px;
+._InputWrapper_1h1p1_1 + ._InputWrapper_1h1p1_1 {
   margin-top: 12px;
 }
-._Input-label_1l5m8_26 {
+._Input-label_1h1p1_5 {
   align-items: center;
   color: var(--puck-color-grey-04);
   display: flex;
@@ -252,17 +235,17 @@
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_1l5m8_35 {
+._Input-labelIcon_1h1p1_14 {
   color: var(--puck-color-grey-07);
   display: flex;
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_1l5m8_42 {
+._Input-disabledIcon_1h1p1_21 {
   color: var(--puck-color-grey-05);
   margin-left: auto;
 }
-._Input-input_1l5m8_47 {
+._Input-input_1h1p1_26 {
   background: var(--puck-color-white);
   border-width: 1px;
   border-style: solid;
@@ -274,7 +257,7 @@
   transition: border-color 50ms ease-in;
   width: 100%;
 }
-select._Input-input_1l5m8_47 {
+select._Input-input_1h1p1_26 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
@@ -284,25 +267,25 @@ select._Input-input_1l5m8_47 {
   cursor: pointer;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
-  ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
+  ._Input_1h1p1_1:has(> input):hover ._Input-input_1h1p1_26:not([readonly]),
+  ._Input_1h1p1_1:has(> textarea):hover ._Input-input_1h1p1_26:not([readonly]) {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
-  ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
+  ._Input_1h1p1_1:has(> select):hover ._Input-input_1h1p1_26:not([disabled]) {
     background-color: var(--puck-color-azure-12);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._Input-input_1l5m8_47:focus {
+._Input-input_1h1p1_26:focus {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
-._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
-._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
+._Input--readOnly_1h1p1_70 > ._Input-input_1h1p1_26,
+._Input--readOnly_1h1p1_70 > select._Input-input_1h1p1_26 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -311,34 +294,34 @@ select._Input-input_1l5m8_47 {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_1l5m8_102 {
+._Input-radioGroupItems_1h1p1_81 {
   display: flex;
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   flex-wrap: wrap;
 }
-._Input-radio_1l5m8_102 {
+._Input-radio_1h1p1_81 {
   border-right: 1px solid var(--puck-color-grey-09);
   flex-grow: 1;
 }
-._Input-radio_1l5m8_102:first-of-type {
+._Input-radio_1h1p1_81:first-of-type {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
-._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
+._Input-radio_1h1p1_81:first-of-type ._Input-radioInner_1h1p1_98 {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
-._Input-radio_1l5m8_102:last-of-type {
+._Input-radio_1h1p1_81:last-of-type {
   border-bottom-right-radius: 4px;
   border-right: 0;
   border-top-right-radius: 4px;
 }
-._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
+._Input-radio_1h1p1_81:last-of-type ._Input-radioInner_1h1p1_98 {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
-._Input-radioInner_1l5m8_119 {
+._Input-radioInner_1h1p1_98 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
@@ -347,32 +330,32 @@ select._Input-input_1l5m8_47 {
   text-align: center;
   transition: background-color 50ms ease-in;
 }
-._Input-radio_1l5m8_102:has(:focus-visible) {
+._Input-radio_1h1p1_81:has(:focus-visible) {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   position: relative;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_1l5m8_119:hover {
+  ._Input-radioInner_1h1p1_98:hover {
     background-color: var(--puck-color-azure-12);
     transition: none;
   }
 }
-._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
+._Input--readOnly_1h1p1_70 ._Input-radioInner_1h1p1_98 {
   background-color: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: default;
 }
-._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
+._Input-radio_1h1p1_81 ._Input-radioInput_1h1p1_143:checked ~ ._Input-radioInner_1h1p1_98 {
   background-color: var(--puck-color-azure-11);
   color: var(--puck-color-azure-04);
   font-weight: 500;
 }
-._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
+._Input--readOnly_1h1p1_70 ._Input-radioInput_1h1p1_143:checked ~ ._Input-radioInner_1h1p1_98 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-04);
 }
-._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
+._Input-radio_1h1p1_81 ._Input-radioInput_1h1p1_143 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -381,7 +364,7 @@ select._Input-input_1l5m8_47 {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_1l5m8_47 {
+textarea._Input-input_1h1p1_26 {
   margin-bottom: -4px;
 }
 
@@ -1567,14 +1550,14 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
-._PuckFields_jp3lw_1 {
+._PuckFields_10bh7_1 {
   position: relative;
   font-family: var(--puck-font-family);
 }
-._PuckFields--isLoading_jp3lw_6 {
+._PuckFields--isLoading_10bh7_6 {
   min-height: 48px;
 }
-._PuckFields-loadingOverlay_jp3lw_10 {
+._PuckFields-loadingOverlay_10bh7_10 {
   background: var(--puck-color-white);
   display: flex;
   justify-content: flex-end;
@@ -1588,12 +1571,25 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
   box-sizing: border-box;
   opacity: 0.8;
 }
-._PuckFields-loadingOverlayInner_jp3lw_25 {
+._PuckFields-loadingOverlayInner_10bh7_25 {
   display: flex;
   padding: 16px;
   position: sticky;
   top: 0;
 }
+._PuckFields-field_10bh7_32 * {
+  box-sizing: border-box;
+}
+._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
+  color: var(--puck-color-grey-04);
+  padding: 16px;
+  padding-bottom: 12px;
+  display: block;
+}
+._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
 ._ComponentList_odh9d_1 {

package/dist/index.d.mts

@@ -165,7 +165,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
 }): react_jsx_runtime.JSX.Element;
 declare namespace Puck {
     var Components: () => react_jsx_runtime.JSX.Element;
-    var Fields: () => react_jsx_runtime.JSX.Element;
+    var Fields: ({ wrapFields }: {
+        wrapFields?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
     var Outline: () => react_jsx_runtime.JSX.Element;
     var Preview: ({ id }: {
         id?: string;

package/dist/index.d.ts

@@ -165,7 +165,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
 }): react_jsx_runtime.JSX.Element;
 declare namespace Puck {
     var Components: () => react_jsx_runtime.JSX.Element;
-    var Fields: () => react_jsx_runtime.JSX.Element;
+    var Fields: ({ wrapFields }: {
+        wrapFields?: boolean;
+    }) => react_jsx_runtime.JSX.Element;
     var Outline: () => react_jsx_runtime.JSX.Element;
     var Preview: ({ id }: {
         id?: string;

package/dist/index.js

@@ -308,7 +308,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_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
+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" };
 
 // components/AutoField/index.tsx
 var import_react20 = require("react");
@@ -3663,8 +3663,9 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneEdit, __spreadValues({}, props));
 var DropZoneEdit = (0, import_react29.forwardRef)(
-  function DropZoneEdit2({
+  function DropZoneEditInternal({
     zone,
     allow,
     disallow,
@@ -3822,10 +3823,10 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
         }),
         children: contentWithPreview.map((item, i) => {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g;
           const componentId = item.props.id;
           const puckProps = {
-            renderDropZone: DropZone,
+            renderDropZone: DropZoneEditPure,
             isEditing: true,
             dragRef: null
           };
@@ -3842,13 +3843,13 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
           const componentConfig = config.components[item.type];
           let componentType = item.type;
           let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
-          if (item.type === "preview" && preview) {
+          if (item.type === "preview") {
             let Preview4 = function() {
               return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
             };
             var Preview3 = Preview4;
-            componentType = preview.componentType;
-            label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
+            componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
+            label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
             Render2 = Preview4;
           }
           return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -3863,7 +3864,7 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
                   zoneCompound,
                   depth: depth + 1,
                   index: i,
-                  isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
+                  isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
                   isSelected,
                   label,
                   isEnabled,
@@ -3888,8 +3889,9 @@ var DropZoneEdit = (0, import_react29.forwardRef)(
     );
   }
 );
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = (0, import_react29.forwardRef)(
-  function DropZoneRender2({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = (0, import_react29.useContext)(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
@@ -3927,7 +3929,9 @@ var DropZoneRender = (0, import_react29.forwardRef)(
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: DropZoneRenderPure
+                }
               })
             )
           },
@@ -4503,6 +4507,11 @@ var reduceUi = (ui, action) => {
       itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
     });
   }
+  if (action.type === "remove") {
+    return __spreadProps(__spreadValues({}, ui), {
+      itemSelector: null
+    });
+  }
   return ui;
 };
 
@@ -4753,6 +4762,9 @@ var _PointerSensor = class _PointerSensor extends import_abstract10.Sensor {
     }
   }
   handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     const { status } = this.manager.dragOperation;
@@ -5374,7 +5386,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = (0, import_react32.useState)(generateId());
+  const id = (0, import_react32.useId)();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5589,7 +5601,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
+var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
 var import_react35 = require("react");
@@ -5675,22 +5687,36 @@ var useResolvedFields = () => {
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state]
+    [data, config, componentData, selectedItem, resolvedFields, state, parent]
   );
+  const [hasParent, setHasParent] = (0, import_react35.useState)(false);
   (0, import_react35.useEffect)(() => {
-    if (hasResolver) {
-      setFieldsLoading(true);
-      resolveFields(defaultFields).then((fields) => {
-        setResolvedFields(fields || {});
-        setFieldsLoading(false);
-      });
-    } else {
-      setResolvedFields(defaultFields);
+    setHasParent(!!parent);
+  }, [parent]);
+  (0, import_react35.useEffect)(() => {
+    var _a2, _b2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || hasParent) {
+      if (hasResolver) {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      } else {
+        setResolvedFields(defaultFields);
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -5712,7 +5738,7 @@ var Fields = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
-      className: getClassName21(),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
@@ -5788,7 +5814,7 @@ var Fields = () => {
               item: selectedItem
             });
             const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("field"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
@@ -5797,16 +5823,15 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
             const id = `root_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("field"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               AutoFieldPrivate,
               {
                 field,
@@ -5815,9 +5840,8 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           }
         }) }),
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Loader, { size: 16 }) }) })

package/dist/index.mjs

@@ -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_1l5m8_1", "Input": "_Input_1l5m8_1", "Input-label": "_Input-label_1l5m8_26", "Input-labelIcon": "_Input-labelIcon_1l5m8_35", "Input-disabledIcon": "_Input-disabledIcon_1l5m8_42", "Input-input": "_Input-input_1l5m8_47", "Input--readOnly": "_Input--readOnly_1l5m8_91", "Input-radioGroupItems": "_Input-radioGroupItems_1l5m8_102", "Input-radio": "_Input-radio_1l5m8_102", "Input-radioInner": "_Input-radioInner_1l5m8_119", "Input-radioInput": "_Input-radioInput_1l5m8_164" };
+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" };
 
 // components/AutoField/index.tsx
 import {
@@ -2425,7 +2425,7 @@ init_react_import();
 var styles_module_default10 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
 
 // components/Drawer/index.tsx
-import { useMemo as useMemo9, useState as useState18 } from "react";
+import { useId as useId2, useMemo as useMemo9, useState as useState18 } from "react";
 
 // components/DragDropContext/index.tsx
 init_react_import();
@@ -3506,8 +3506,9 @@ import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-r
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default12);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx22(DropZoneEdit, __spreadValues({}, props));
 var DropZoneEdit = forwardRef3(
-  function DropZoneEdit2({
+  function DropZoneEditInternal({
     zone,
     allow,
     disallow,
@@ -3665,10 +3666,10 @@ var DropZoneEdit = forwardRef3(
           backgroundColor: RENDER_DEBUG ? getRandomColor() : void 0
         }),
         children: contentWithPreview.map((item, i) => {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g;
           const componentId = item.props.id;
           const puckProps = {
-            renderDropZone: DropZone,
+            renderDropZone: DropZoneEditPure,
             isEditing: true,
             dragRef: null
           };
@@ -3685,13 +3686,13 @@ var DropZoneEdit = forwardRef3(
           const componentConfig = config.components[item.type];
           let componentType = item.type;
           let label = (_b = componentConfig == null ? void 0 : componentConfig["label"]) != null ? _b : item.type.toString();
-          if (item.type === "preview" && preview) {
+          if (item.type === "preview") {
             let Preview4 = function() {
               return /* @__PURE__ */ jsx22(DrawerItemInner, { name: label, children: appContext2.overrides.componentItem });
             };
             var Preview3 = Preview4;
-            componentType = preview.componentType;
-            label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
+            componentType = (_c = preview == null ? void 0 : preview.componentType) != null ? _c : "__preview";
+            label = (_f = (_e = (_d = config.components[componentType]) == null ? void 0 : _d.label) != null ? _e : componentType) != null ? _f : "Preview";
             Render2 = Preview4;
           }
           return /* @__PURE__ */ jsx22(
@@ -3706,7 +3707,7 @@ var DropZoneEdit = forwardRef3(
                   zoneCompound,
                   depth: depth + 1,
                   index: i,
-                  isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
+                  isLoading: ((_g = appContext2.componentState[componentId]) == null ? void 0 : _g.loadingCount) > 0,
                   isSelected,
                   label,
                   isEnabled,
@@ -3731,8 +3732,9 @@ var DropZoneEdit = forwardRef3(
     );
   }
 );
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx22(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef3(
-  function DropZoneRender2({ className, style, zone }, ref) {
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
     const ctx = useContext6(dropZoneContext);
     const { data, areaId = "root", config } = ctx || {};
     let zoneCompound = rootDroppableId;
@@ -3770,7 +3772,9 @@ var DropZoneRender = forwardRef3(
             children: /* @__PURE__ */ jsx22(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: DropZoneRenderPure
+                }
               })
             )
           },
@@ -4346,6 +4350,11 @@ var reduceUi = (ui, action) => {
       itemSelector: { index: action.sourceIndex + 1, zone: action.sourceZone }
     });
   }
+  if (action.type === "remove") {
+    return __spreadProps(__spreadValues({}, ui), {
+      itemSelector: null
+    });
+  }
   return ui;
 };
 
@@ -4605,6 +4614,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     const { status } = this.manager.dragOperation;
@@ -5226,7 +5238,7 @@ var Drawer = ({
       "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
     );
   }
-  const [id] = useState18(generateId());
+  const id = useId2();
   const { ref } = useDroppableSafe({
     id,
     type: "void",
@@ -5447,7 +5459,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "PuckFields": "_PuckFields_jp3lw_1", "PuckFields--isLoading": "_PuckFields--isLoading_jp3lw_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_jp3lw_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_jp3lw_25" };
+var styles_module_default16 = { "PuckFields": "_PuckFields_10bh7_1", "PuckFields--isLoading": "_PuckFields--isLoading_10bh7_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_10bh7_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_10bh7_25", "PuckFields-field": "_PuckFields-field_10bh7_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_10bh7_36" };
 
 // components/Puck/components/Fields/index.tsx
 import { useCallback as useCallback12, useEffect as useEffect16, useMemo as useMemo11, useState as useState19 } from "react";
@@ -5533,22 +5545,36 @@ var useResolvedFields = () => {
         lastData
       });
     }),
-    [data, config, componentData, selectedItem, resolvedFields, state]
+    [data, config, componentData, selectedItem, resolvedFields, state, parent]
   );
+  const [hasParent, setHasParent] = useState19(false);
   useEffect16(() => {
-    if (hasResolver) {
-      setFieldsLoading(true);
-      resolveFields(defaultFields).then((fields) => {
-        setResolvedFields(fields || {});
-        setFieldsLoading(false);
-      });
-    } else {
-      setResolvedFields(defaultFields);
+    setHasParent(!!parent);
+  }, [parent]);
+  useEffect16(() => {
+    var _a2, _b2;
+    if (!((_a2 = state.ui.itemSelector) == null ? void 0 : _a2.zone) || ((_b2 = state.ui.itemSelector) == null ? void 0 : _b2.zone) === "default-zone" || hasParent) {
+      if (hasResolver) {
+        setFieldsLoading(true);
+        resolveFields(defaultFields).then((fields) => {
+          setResolvedFields(fields || {});
+          setFieldsLoading(false);
+        });
+      } else {
+        setResolvedFields(defaultFields);
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -5570,7 +5596,7 @@ var Fields = () => {
   return /* @__PURE__ */ jsxs14(
     "form",
     {
-      className: getClassName21(),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
@@ -5646,7 +5672,7 @@ var Fields = () => {
               item: selectedItem
             });
             const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5655,16 +5681,15 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
             const id = `root_${field.type}_${fieldName}`;
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx27("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
@@ -5673,9 +5698,8 @@ var Fields = () => {
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
-              },
-              id
-            );
+              }
+            ) }, id);
           }
         }) }),
         isLoading && /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx27("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx27(Loader, { size: 16 }) }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.18.0-canary.1ea6f98",
+  "version": "0.18.0-canary.30f9a92",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",