@measured/puck 0.18.0-canary.c6df5b2 → 0.18.0-canary.cfe4ca8

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

@@ -136,6 +136,7 @@
 
 /* styles.css */
 #frame-root {
+  height: 1px;
   min-height: 100vh;
 }
 
@@ -224,27 +225,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 +236,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 +258,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 +268,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 +295,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 +331,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 +365,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 +1551,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 +1572,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");
@@ -1723,7 +1723,14 @@ var DefaultField = ({
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
             if (field.type === "number") {
-              onChange(Number(e.currentTarget.value));
+              const numberValue = Number(e.currentTarget.value);
+              if (typeof field.min !== "undefined" && numberValue < field.min) {
+                return;
+              }
+              if (typeof field.max !== "undefined" && numberValue > field.max) {
+                return;
+              }
+              onChange(numberValue);
             } else {
               onChange(e.currentTarget.value);
             }
@@ -2471,6 +2478,7 @@ var FieldLabelInternal = ({
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { dispatch, overrides, selectedItem } = useAppContext();
+  const nestedFieldContext = (0, import_react20.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -2535,7 +2543,6 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  const nestedFieldContext = (0, import_react20.useContext)(NestedFieldContext);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     NestedFieldContext.Provider,
     {
@@ -3656,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,
@@ -3815,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
           };
@@ -3835,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)(
@@ -3856,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,
@@ -3881,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;
@@ -3920,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
+                }
               })
             )
           },
@@ -3995,6 +4006,48 @@ var getFrame = () => {
   return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
 
+// lib/global-position.ts
+init_react_import();
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    var _a;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -4024,10 +4077,12 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getPointerCollisions = (position, manager, ownerDocument) => {
-  var _a;
+var getPointerCollisions = (position, manager) => {
   const candidates = [];
-  let elements = ownerDocument.elementsFromPoint(position.x, position.y);
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
   const previewFrame = elements.find(
     (el) => el.getAttribute("data-puck-preview")
   );
@@ -4036,17 +4091,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
     elements = [drawer];
   }
   if (previewFrame) {
-    const iframe = previewFrame.querySelector("iframe");
-    if (iframe) {
-      const rect = iframe.getBoundingClientRect();
-      const frame = getFrame();
-      if (frame) {
-        const scaleFactor = rect.width / (((_a = iframe.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
-        elements = frame.elementsFromPoint(
-          (position.x - rect.left) / scaleFactor,
-          (position.y - rect.top) / scaleFactor
-        );
-      }
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
     }
   }
   if (elements) {
@@ -4063,9 +4110,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
   }
   return candidates;
 };
-var findDeepestCandidate = (position, manager, ownerDocument) => {
+var findDeepestCandidate = (position, manager) => {
   var _a;
-  const candidates = getPointerCollisions(position, manager, ownerDocument);
+  const candidates = getPointerCollisions(position, manager);
   if (candidates.length > 0) {
     const sortedCandidates = depthSort(candidates);
     const draggable = manager.dragOperation.source;
@@ -4118,22 +4165,18 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     const cleanupEffect = (0, import_state.effects)(() => {
       const handleMove = (event) => {
-        const position = {
+        const target = event.originalTarget || event.target;
+        const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
-        };
-        const target = event.originalTarget || event.target;
-        const ownerDocument = target == null ? void 0 : target.ownerDocument;
+        });
         const elements = document.elementsFromPoint(
-          event.clientX,
-          event.clientY
+          position.global.x,
+          position.global.y
         );
         const overEl = elements.some((el) => el.id === id);
         if (overEl) {
-          onChange(
-            findDeepestCandidate(position, manager, ownerDocument),
-            manager
-          );
+          onChange(findDeepestCandidate(position, manager), manager);
         }
       };
       const handleMoveThrottled = throttle(handleMove, 50);
@@ -4464,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;
 };
 
@@ -4714,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;
@@ -5335,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",
@@ -5550,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");
@@ -5636,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);
+        });
+        return;
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+    setResolvedFields(defaultFields);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -5673,7 +5738,7 @@ var Fields = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "form",
     {
-      className: getClassName21(),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
@@ -5749,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,
@@ -5758,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,
@@ -5776,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 {
@@ -1530,7 +1530,14 @@ var DefaultField = ({
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
             if (field.type === "number") {
-              onChange(Number(e.currentTarget.value));
+              const numberValue = Number(e.currentTarget.value);
+              if (typeof field.min !== "undefined" && numberValue < field.min) {
+                return;
+              }
+              if (typeof field.max !== "undefined" && numberValue > field.max) {
+                return;
+              }
+              onChange(numberValue);
             } else {
               onChange(e.currentTarget.value);
             }
@@ -2284,6 +2291,7 @@ var FieldLabelInternal = ({
 function AutoFieldInternal(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { dispatch, overrides, selectedItem } = useAppContext();
+  const nestedFieldContext = useContext3(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
   const field = props.field;
   const label = field.label;
@@ -2348,7 +2356,6 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  const nestedFieldContext = useContext3(NestedFieldContext);
   return /* @__PURE__ */ jsx19(
     NestedFieldContext.Provider,
     {
@@ -2418,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();
@@ -3499,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,
@@ -3658,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
           };
@@ -3678,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(
@@ -3699,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,
@@ -3724,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;
@@ -3763,7 +3772,9 @@ var DropZoneRender = forwardRef3(
             children: /* @__PURE__ */ jsx22(
               Component.render,
               __spreadProps(__spreadValues({}, item.props), {
-                puck: { renderDropZone: DropZoneRender2 }
+                puck: {
+                  renderDropZone: DropZoneRenderPure
+                }
               })
             )
           },
@@ -3838,6 +3849,48 @@ var getFrame = () => {
   return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
 };
 
+// lib/global-position.ts
+init_react_import();
+var GlobalPosition = class {
+  constructor(target, original) {
+    this.scaleFactor = 1;
+    this.frameEl = null;
+    this.frameRect = null;
+    var _a;
+    this.target = target;
+    this.original = original;
+    this.frameEl = document.querySelector("iframe");
+    if (this.frameEl) {
+      this.frameRect = this.frameEl.getBoundingClientRect();
+      this.scaleFactor = this.frameRect.width / (((_a = this.frameEl.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
+    }
+  }
+  get x() {
+    return this.original.x;
+  }
+  get y() {
+    return this.original.y;
+  }
+  get global() {
+    if (document !== this.target.ownerDocument && this.frameRect) {
+      return {
+        x: this.x * this.scaleFactor + this.frameRect.left,
+        y: this.y * this.scaleFactor + this.frameRect.top
+      };
+    }
+    return this.original;
+  }
+  get frame() {
+    if (document === this.target.ownerDocument && this.frameRect) {
+      return {
+        x: (this.x - this.frameRect.left) / this.scaleFactor,
+        y: (this.y - this.frameRect.top) / this.scaleFactor
+      };
+    }
+    return this.original;
+  }
+};
+
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -3867,10 +3920,12 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getPointerCollisions = (position, manager, ownerDocument) => {
-  var _a;
+var getPointerCollisions = (position, manager) => {
   const candidates = [];
-  let elements = ownerDocument.elementsFromPoint(position.x, position.y);
+  let elements = position.target.ownerDocument.elementsFromPoint(
+    position.x,
+    position.y
+  );
   const previewFrame = elements.find(
     (el) => el.getAttribute("data-puck-preview")
   );
@@ -3879,17 +3934,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
     elements = [drawer];
   }
   if (previewFrame) {
-    const iframe = previewFrame.querySelector("iframe");
-    if (iframe) {
-      const rect = iframe.getBoundingClientRect();
-      const frame = getFrame();
-      if (frame) {
-        const scaleFactor = rect.width / (((_a = iframe.contentWindow) == null ? void 0 : _a.innerWidth) || 1);
-        elements = frame.elementsFromPoint(
-          (position.x - rect.left) / scaleFactor,
-          (position.y - rect.top) / scaleFactor
-        );
-      }
+    const frame = getFrame();
+    if (frame) {
+      elements = frame.elementsFromPoint(position.frame.x, position.frame.y);
     }
   }
   if (elements) {
@@ -3906,9 +3953,9 @@ var getPointerCollisions = (position, manager, ownerDocument) => {
   }
   return candidates;
 };
-var findDeepestCandidate = (position, manager, ownerDocument) => {
+var findDeepestCandidate = (position, manager) => {
   var _a;
-  const candidates = getPointerCollisions(position, manager, ownerDocument);
+  const candidates = getPointerCollisions(position, manager);
   if (candidates.length > 0) {
     const sortedCandidates = depthSort(candidates);
     const draggable = manager.dragOperation.source;
@@ -3961,22 +4008,18 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     const cleanupEffect = effects(() => {
       const handleMove = (event) => {
-        const position = {
+        const target = event.originalTarget || event.target;
+        const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
-        };
-        const target = event.originalTarget || event.target;
-        const ownerDocument = target == null ? void 0 : target.ownerDocument;
+        });
         const elements = document.elementsFromPoint(
-          event.clientX,
-          event.clientY
+          position.global.x,
+          position.global.y
         );
         const overEl = elements.some((el) => el.id === id);
         if (overEl) {
-          onChange(
-            findDeepestCandidate(position, manager, ownerDocument),
-            manager
-          );
+          onChange(findDeepestCandidate(position, manager), manager);
         }
       };
       const handleMoveThrottled = throttle(handleMove, 50);
@@ -4307,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;
 };
 
@@ -4566,6 +4614,9 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     const { status } = this.manager.dragOperation;
@@ -5187,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",
@@ -5408,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";
@@ -5494,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);
+        });
+        return;
+      }
     }
-  }, [data, defaultFields, selectedItem, hasResolver]);
+    setResolvedFields(defaultFields);
+  }, [
+    data,
+    defaultFields,
+    state.ui.itemSelector,
+    selectedItem,
+    hasResolver,
+    hasParent
+  ]);
   return [resolvedFields, fieldsLoading];
 };
-var Fields = () => {
+var Fields = ({ wrapFields = true }) => {
   var _a, _b;
   const {
     selectedItem,
@@ -5531,7 +5596,7 @@ var Fields = () => {
   return /* @__PURE__ */ jsxs14(
     "form",
     {
-      className: getClassName21(),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
@@ -5607,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,
@@ -5616,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,
@@ -5634,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.c6df5b2",
+  "version": "0.18.0-canary.cfe4ca8",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",