@measured/puck 0.17.0-canary.35170f8 → 0.17.0-canary.361e5f9

package/dist/index.mjs

@@ -23,35 +23,45 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      var nativeCodeString = "[native code]";
       function classNames() {
-        var classes = [];
+        var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
-          if (!arg) continue;
-          var argType = typeof arg;
-          if (argType === "string" || argType === "number") {
-            classes.push(arg);
-          } else if (Array.isArray(arg)) {
-            if (arg.length) {
-              var inner = classNames.apply(null, arg);
-              if (inner) {
-                classes.push(inner);
-              }
-            }
-          } else if (argType === "object") {
-            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-              classes.push(arg.toString());
-              continue;
-            }
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
           }
         }
-        return classes.join(" ");
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
         classNames.default = classNames;
@@ -184,7 +194,7 @@ var styles_module_default2 = { "InputWrapper": "_InputWrapper_1l5m8_1", "Input":
 import {
   useCallback as useCallback5,
   useEffect as useEffect9,
-  useMemo as useMemo2,
+  useMemo as useMemo4,
   useState as useState10
 } from "react";
 
@@ -203,6 +213,17 @@ init_react_import();
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 init_react_import();
+import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
+
+// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+init_react_import();
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+init_react_import();
 import { forwardRef, createElement } from "react";
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
@@ -219,41 +240,61 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode
+    } = _b, rest = __objRest(_b, [
+      "color",
+      "size",
+      "strokeWidth",
+      "absoluteStrokeWidth",
+      "className",
+      "children",
+      "iconNode"
+    ]);
+    return createElement(
+      "svg",
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, defaultAttributes), {
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className)
+      }), rest),
+      [
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().trim();
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef(
+  const Component = forwardRef2(
     (_a, ref) => {
-      var _b = _a, { color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children } = _b, rest = __objRest(_b, ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children"]);
-      return createElement(
-        "svg",
-        __spreadValues(__spreadProps(__spreadValues({
-          ref
-        }, defaultAttributes), {
-          width: size,
-          height: size,
-          stroke: color,
-          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-          className: ["lucide", `lucide-${toKebabCase(iconName)}`, className].join(" ")
-        }), rest),
-        [
-          ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-          ...Array.isArray(children) ? children : [children]
-        ]
-      );
+      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+      return createElement2(Icon, __spreadValues({
+        ref,
+        iconNode,
+        className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
+      }, props));
     }
   );
   Component.displayName = `${iconName}`;
   return Component;
 };
 
-// ../../node_modules/lucide-react/dist/esm/icons/check-circle.js
-init_react_import();
-var CheckCircle = createLucideIcon("CheckCircle", [
-  ["path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14", key: "g774vq" }],
-  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
-]);
-
 // ../../node_modules/lucide-react/dist/esm/icons/chevron-down.js
 init_react_import();
 var ChevronDown = createLucideIcon("ChevronDown", [
@@ -270,6 +311,13 @@ var ChevronRight = createLucideIcon("ChevronRight", [
 init_react_import();
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js
+init_react_import();
+var CircleCheckBig = createLucideIcon("CircleCheckBig", [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/copy.js
 init_react_import();
 var Copy = createLucideIcon("Copy", [
@@ -277,6 +325,14 @@ var Copy = createLucideIcon("Copy", [
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/ellipsis-vertical.js
+init_react_import();
+var EllipsisVertical = createLucideIcon("EllipsisVertical", [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/globe.js
 init_react_import();
 var Globe = createLucideIcon("Globe", [
@@ -300,12 +356,24 @@ var Layers = createLucideIcon("Layers", [
   [
     "path",
     {
-      d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z",
-      key: "8b97xw"
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
     }
   ],
-  ["path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65", key: "dd6zsq" }],
-  ["path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65", key: "ep9fru" }]
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/layout-grid.js
@@ -327,12 +395,19 @@ var Link = createLucideIcon("Link", [
 // ../../node_modules/lucide-react/dist/esm/icons/list.js
 init_react_import();
 var List = createLucideIcon("List", [
-  ["line", { x1: "8", x2: "21", y1: "6", y2: "6", key: "7ey8pc" }],
-  ["line", { x1: "8", x2: "21", y1: "12", y2: "12", key: "rjfblc" }],
-  ["line", { x1: "8", x2: "21", y1: "18", y2: "18", key: "c3b1m8" }],
-  ["line", { x1: "3", x2: "3.01", y1: "6", y2: "6", key: "1g7gq3" }],
-  ["line", { x1: "3", x2: "3.01", y1: "12", y2: "12", key: "1pjlvk" }],
-  ["line", { x1: "3", x2: "3.01", y1: "18", y2: "18", key: "28t2mc" }]
+  ["path", { d: "M3 12h.01", key: "nlz23k" }],
+  ["path", { d: "M3 18h.01", key: "1tta3j" }],
+  ["path", { d: "M3 6h.01", key: "1rqtza" }],
+  ["path", { d: "M8 12h13", key: "1za7za" }],
+  ["path", { d: "M8 18h13", key: "1lx6n3" }],
+  ["path", { d: "M8 6h13", key: "ik3vkj" }]
+]);
+
+// ../../node_modules/lucide-react/dist/esm/icons/lock-open.js
+init_react_import();
+var LockOpen = createLucideIcon("LockOpen", [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/lock.js
@@ -350,26 +425,18 @@ var Monitor = createLucideIcon("Monitor", [
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ]);
 
-// ../../node_modules/lucide-react/dist/esm/icons/more-vertical.js
-init_react_import();
-var MoreVertical = createLucideIcon("MoreVertical", [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-]);
-
 // ../../node_modules/lucide-react/dist/esm/icons/panel-left.js
 init_react_import();
 var PanelLeft = createLucideIcon("PanelLeft", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
-  ["line", { x1: "9", x2: "9", y1: "3", y2: "21", key: "13tij5" }]
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/panel-right.js
 init_react_import();
 var PanelRight = createLucideIcon("PanelRight", [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
-  ["line", { x1: "15", x2: "15", y1: "3", y2: "21", key: "1hpv9i" }]
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M15 3v18", key: "14nvp0" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/plus.js
@@ -383,7 +450,7 @@ var Plus = createLucideIcon("Plus", [
 init_react_import();
 var Redo2 = createLucideIcon("Redo2", [
   ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
-  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13", key: "19mnr4" }]
+  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/search.js
@@ -441,14 +508,7 @@ var Type = createLucideIcon("Type", [
 init_react_import();
 var Undo2 = createLucideIcon("Undo2", [
   ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
-  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11", key: "llx8ln" }]
-]);
-
-// ../../node_modules/lucide-react/dist/esm/icons/unlock.js
-init_react_import();
-var Unlock = createLucideIcon("Unlock", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
+  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
 ]);
 
 // ../../node_modules/lucide-react/dist/esm/icons/zoom-in.js
@@ -1449,6 +1509,7 @@ var DefaultField = ({
           className: getClassName6("input"),
           autoComplete: "off",
           type: field.type,
+          title: label || name,
           name,
           value: typeof value === "undefined" ? "" : value.toString(),
           onChange: (e) => {
@@ -1707,7 +1768,7 @@ var ExternalInput = ({
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx14(Unlock, { size: 16 })
+              children: /* @__PURE__ */ jsx14(LockOpen, { size: 16 })
             }
           )
         ] }),
@@ -1869,6 +1930,20 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
+import { useMemo as useMemo2 } from "react";
+
+// lib/safe-json-parse.ts
+init_react_import();
+var safeJsonParse = (str) => {
+  try {
+    const jsonValue = JSON.parse(str);
+    return jsonValue;
+  } catch (e) {
+    return str;
+  }
+};
+
+// components/AutoField/fields/RadioField/index.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("Input", styles_module_default2);
 var RadioField = ({
@@ -1881,13 +1956,17 @@ var RadioField = ({
   label,
   Label
 }) => {
+  const flatOptions = useMemo2(
+    () => field.type === "radio" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "radio" || !field.options) {
     return null;
   }
   return /* @__PURE__ */ jsx16(
     Label,
     {
-      icon: /* @__PURE__ */ jsx16(CheckCircle, { size: 16 }),
+      icon: /* @__PURE__ */ jsx16(CircleCheckBig, { size: 16 }),
       label: label || name,
       readOnly,
       el: "div",
@@ -1904,11 +1983,12 @@ var RadioField = ({
                 value: option.value,
                 name,
                 onChange: (e) => {
-                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-                    onChange(JSON.parse(e.currentTarget.value));
-                    return;
+                  const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+                  if (flatOptions.indexOf(jsonValue) > -1) {
+                    onChange(jsonValue);
+                  } else {
+                    onChange(e.target.value);
                   }
-                  onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
                 checked: value === option.value
@@ -1925,6 +2005,7 @@ var RadioField = ({
 
 // components/AutoField/fields/SelectField/index.tsx
 init_react_import();
+import { useMemo as useMemo3 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("Input", styles_module_default2);
 var SelectField = ({
@@ -1937,6 +2018,10 @@ var SelectField = ({
   readOnly,
   id
 }) => {
+  const flatOptions = useMemo3(
+    () => field.type === "select" ? field.options.map(({ value: value2 }) => value2) : [],
+    [field]
+  );
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -1950,14 +2035,16 @@ var SelectField = ({
         "select",
         {
           id,
+          title: label || name,
           className: getClassName12("input"),
           disabled: readOnly,
           onChange: (e) => {
-            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
-              onChange(JSON.parse(e.currentTarget.value));
-              return;
+            const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+            if (flatOptions.indexOf(jsonValue) > -1) {
+              onChange(jsonValue);
+            } else {
+              onChange(e.target.value);
             }
-            onChange(e.currentTarget.value);
           },
           value,
           children: field.options.map((option) => /* @__PURE__ */ jsx17(
@@ -2036,7 +2123,7 @@ var ObjectField = ({
     Label,
     {
       label: label || name,
-      icon: /* @__PURE__ */ jsx19(MoreVertical, { size: 16 }),
+      icon: /* @__PURE__ */ jsx19(EllipsisVertical, { size: 16 }),
       el: "div",
       readOnly,
       children: /* @__PURE__ */ jsx19("div", { className: getClassName14(), children: /* @__PURE__ */ jsx19("fieldset", { className: getClassName14("fieldset"), children: Object.keys(field.objectFields).map((fieldName) => {
@@ -2117,7 +2204,7 @@ var FieldLabelInternal2 = ({
   readOnly
 }) => {
   const { overrides } = useAppContext();
-  const Wrapper = useMemo2(
+  const Wrapper = useMemo4(
     () => overrides.fieldLabel || FieldLabel,
     [overrides]
   );
@@ -2203,7 +2290,18 @@ function AutoFieldInternal(props) {
   }
   const children = defaultFields[field.type](mergedProps);
   const Render2 = render[field.type];
-  return /* @__PURE__ */ jsx20("div", { className: getClassNameWrapper(), onFocus, onBlur, children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children })) });
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: getClassNameWrapper(),
+      onFocus,
+      onBlur,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsx20(Render2, __spreadProps(__spreadValues({}, mergedProps), { children }))
+    }
+  );
 }
 function AutoFieldPrivate(props) {
   const { state } = useAppContext();
@@ -2232,7 +2330,7 @@ function AutoFieldPrivate(props) {
   return /* @__PURE__ */ jsx20(AutoFieldInternal, __spreadValues(__spreadValues({}, props), localProps));
 }
 function AutoField(props) {
-  const DefaultLabel = useMemo2(() => {
+  const DefaultLabel = useMemo4(() => {
     const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx20(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
@@ -2255,7 +2353,7 @@ var styles_module_default10 = { "Drawer": "_Drawer_1oa7v_1", "DrawerItem--disabl
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useMemo as useMemo3
+  useMemo as useMemo5
 } from "react";
 import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default10);
@@ -2293,7 +2391,7 @@ var DrawerItem = ({
 }) => {
   const ctx = useContext2(drawerContext);
   const resolvedId = `${ctx.droppableId}::${id || name}`;
-  const CustomInner = useMemo3(
+  const CustomInner = useMemo5(
     () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ jsx21("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
@@ -2340,7 +2438,7 @@ import { useContext as useContext3, useEffect as useEffect12 } from "react";
 init_react_import();
 import {
   useEffect as useEffect11,
-  useMemo as useMemo4,
+  useMemo as useMemo6,
   useState as useState12
 } from "react";
 import { Draggable as Draggable2 } from "@measured/dnd";
@@ -2430,7 +2528,7 @@ var DraggableComponent = ({
       setDisableSecondaryAnimation(true);
     }
   }, []);
-  const CustomActionBar = useMemo4(
+  const CustomActionBar = useMemo6(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
@@ -2961,7 +3059,7 @@ init_react_import();
 import {
   useCallback as useCallback11,
   useEffect as useEffect18,
-  useMemo as useMemo13,
+  useMemo as useMemo15,
   useReducer,
   useState as useState21
 } from "react";
@@ -3036,7 +3134,7 @@ var styles_module_default13 = { "SidebarSection": "_SidebarSection_125qe_1", "Si
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useContext as useContext4, useMemo as useMemo5 } from "react";
+import { useContext as useContext4, useMemo as useMemo7 } from "react";
 var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
   const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
   const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
@@ -3087,7 +3185,7 @@ var useBreadcrumbs = (renderCount) => {
     selectedItem
   } = useAppContext();
   const dzContext = useContext4(dropZoneContext);
-  return useMemo5(() => {
+  return useMemo7(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
       dzContext == null ? void 0 : dzContext.pathData,
@@ -3571,7 +3669,23 @@ 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" };
 
 // components/Puck/components/Fields/index.tsx
-import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo6, useState as useState15 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo8, useState as useState15 } from "react";
+
+// lib/use-parent.ts
+init_react_import();
+import { useContext as useContext5 } from "react";
+var useParent = (itemSelector) => {
+  var _a;
+  const { selectedItem, state } = useAppContext();
+  const { pathData } = useContext5(dropZoneContext) || {};
+  const item = itemSelector ? getItem(itemSelector, state.data) : selectedItem;
+  const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, state.data);
+  const lastItem = breadcrumbs[breadcrumbs.length - 1];
+  const parent = (lastItem == null ? void 0 : lastItem.selector) ? (_a = getItem(lastItem.selector, state.data)) != null ? _a : null : null;
+  return parent || null;
+};
+
+// components/Puck/components/Fields/index.tsx
 import { Fragment as Fragment12, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("PuckFields", styles_module_default16);
 var defaultPageFields = {
@@ -3585,10 +3699,11 @@ var DefaultFields = ({
 var useResolvedFields = () => {
   var _a, _b;
   const { selectedItem, state, config } = useAppContext();
+  const parent = useParent();
   const { data } = state;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   const componentConfig = selectedItem ? config.components[selectedItem.type] : null;
-  const defaultFields = useMemo6(
+  const defaultFields = useMemo8(
     () => (selectedItem ? componentConfig == null ? void 0 : componentConfig.fields : rootFields) || {},
     [selectedItem, rootFields, componentConfig == null ? void 0 : componentConfig.fields]
   );
@@ -3615,7 +3730,8 @@ var useResolvedFields = () => {
             fields,
             lastFields: resolvedFields,
             lastData,
-            appState: state
+            appState: state,
+            parent
           }
         );
       }
@@ -3625,7 +3741,8 @@ var useResolvedFields = () => {
           fields,
           lastFields: resolvedFields,
           lastData,
-          appState: state
+          appState: state,
+          parent
         });
       }
       return defaultResolveFields(componentData, {
@@ -3647,7 +3764,7 @@ var useResolvedFields = () => {
     } else {
       setResolvedFields(defaultFields);
     }
-  }, [data, defaultFields, state.ui.itemSelector, hasResolver]);
+  }, [data, defaultFields, selectedItem, hasResolver]);
   return [resolvedFields, fieldsLoading];
 };
 var Fields = () => {
@@ -3668,7 +3785,7 @@ var Fields = () => {
   const componentResolving = selectedItem ? ((_a = componentState[selectedItem == null ? void 0 : selectedItem.props.id]) == null ? void 0 : _a.loadingCount) > 0 : ((_b = componentState["puck-root"]) == null ? void 0 : _b.loadingCount) > 0;
   const isLoading = fieldsResolving || componentResolving;
   const rootProps = data.root.props || data.root;
-  const Wrapper = useMemo6(() => overrides.fields || DefaultFields, [overrides]);
+  const Wrapper = useMemo8(() => overrides.fields || DefaultFields, [overrides]);
   return /* @__PURE__ */ jsxs15(
     "form",
     {
@@ -3747,34 +3864,36 @@ var Fields = () => {
             const { edit } = getPermissions({
               item: selectedItem
             });
+            const id = `${selectedItem.props.id}_${field.type}_${fieldName}`;
             return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `${selectedItem.props.id}_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: selectedItem.props[fieldName],
                 onChange
               },
-              `${selectedItem.props.id}_${fieldName}`
+              id
             );
           } else {
             const readOnly = data.root.readOnly || {};
             const { edit } = getPermissions({
               root: true
             });
+            const id = `root_${field.type}_${fieldName}`;
             return /* @__PURE__ */ jsx27(
               AutoFieldPrivate,
               {
                 field,
                 name: fieldName,
-                id: `root_${fieldName}`,
+                id,
                 readOnly: !edit || readOnly[fieldName],
                 value: rootProps[fieldName],
                 onChange
               },
-              `page_${fieldName}`
+              id
             );
           }
         }) }),
@@ -3937,24 +4056,24 @@ var useComponentList = (config, ui) => {
 };
 
 // components/Puck/components/Components/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Components = () => {
   const { config, state, overrides } = useAppContext();
   const componentList = useComponentList(config, state.ui);
-  const Wrapper = useMemo7(() => overrides.components || "div", [overrides]);
+  const Wrapper = useMemo9(() => overrides.components || "div", [overrides]);
   return /* @__PURE__ */ jsx30(Wrapper, { children: componentList ? componentList : /* @__PURE__ */ jsx30(ComponentList, { id: "all" }) });
 };
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo10 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
   createContext as createContext4,
-  useContext as useContext5,
+  useContext as useContext6,
   useEffect as useEffect15,
   useRef as useRef3,
   useState as useState17
@@ -4164,7 +4283,7 @@ var CopyHostStyles = ({
   return /* @__PURE__ */ jsx31(Fragment13, { children });
 };
 var autoFrameContext = createContext4({});
-var useFrame = () => useContext5(autoFrameContext);
+var useFrame = () => useContext6(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -4228,7 +4347,7 @@ var Preview = ({ id = "puck-preview" }) => {
     },
     [config.root]
   );
-  const Frame = useMemo8(() => overrides.iframe, [overrides]);
+  const Frame = useMemo10(() => overrides.iframe, [overrides]);
   const rootProps = state.data.root.props || state.data.root;
   return /* @__PURE__ */ jsx32(
     "div",
@@ -4317,7 +4436,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 
 // lib/is-child-of-zone.ts
 init_react_import();
@@ -4344,7 +4463,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = useContext6(dropZoneContext);
+  const ctx = useContext7(dropZoneContext);
   return /* @__PURE__ */ jsxs17(Fragment15, { children: [
     label && /* @__PURE__ */ jsxs17("div", { className: getClassName24("zoneTitle"), children: [
       /* @__PURE__ */ jsx33("div", { className: getClassName24("zoneIcon"), children: /* @__PURE__ */ jsx33(Layers, { size: "16" }) }),
@@ -4450,7 +4569,7 @@ var LayerTree = ({
 };
 
 // components/Puck/components/Outline/index.tsx
-import { useCallback as useCallback9, useMemo as useMemo9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
 import { Fragment as Fragment16, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Outline = () => {
   const { dispatch, state, overrides, config } = useAppContext();
@@ -4465,7 +4584,7 @@ var Outline = () => {
     },
     []
   );
-  const Wrapper = useMemo9(() => overrides.outline || "div", [overrides]);
+  const Wrapper = useMemo11(() => overrides.outline || "div", [overrides]);
   return /* @__PURE__ */ jsx34(Wrapper, { children: /* @__PURE__ */ jsx34(dropZoneContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsxs18(Fragment16, { children: [
     (ctx == null ? void 0 : ctx.activeZones) && (ctx == null ? void 0 : ctx.activeZones[rootDroppableId]) && /* @__PURE__ */ jsx34(
       LayerTree,
@@ -4729,14 +4848,14 @@ var getBox = function getBox2(el) {
 import {
   useCallback as useCallback10,
   useEffect as useEffect17,
-  useMemo as useMemo11,
+  useMemo as useMemo13,
   useRef as useRef4,
   useState as useState20
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect16, useMemo as useMemo10, useState as useState19 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useState as useState19 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 init_react_import();
@@ -4796,7 +4915,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo10(
+  const zoomOptions = useMemo12(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
@@ -4921,11 +5040,11 @@ var Canvas = () => {
   const { ui } = state;
   const frameRef = useRef4(null);
   const [showTransition, setShowTransition] = useState20(false);
-  const defaultRender = useMemo11(() => {
+  const defaultRender = useMemo13(() => {
     const PuckDefault = ({ children }) => /* @__PURE__ */ jsx36(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo11(
+  const CustomPreview = useMemo13(
     () => overrides.preview || defaultRender,
     [overrides]
   );
@@ -5081,7 +5200,7 @@ var insertComponent = (componentType, zone, index, {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -5120,7 +5239,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo12(() => {
+  return useMemo14(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -5301,7 +5420,7 @@ function Puck({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  const defaultHeaderRender = useMemo13(() => {
+  const defaultHeaderRender = useMemo15(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -5315,7 +5434,7 @@ function Puck({
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo13(() => {
+  const defaultHeaderActionsRender = useMemo15(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -5332,15 +5451,15 @@ function Puck({
     overrides,
     plugins
   });
-  const CustomPuck = useMemo13(
+  const CustomPuck = useMemo15(
     () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
-  const CustomHeader = useMemo13(
+  const CustomHeader = useMemo15(
     () => loadedOverrides.header || defaultHeaderRender,
     [loadedOverrides]
   );
-  const CustomHeaderActions = useMemo13(
+  const CustomHeaderActions = useMemo15(
     () => loadedOverrides.headerActions || defaultHeaderActionsRender,
     [loadedOverrides]
   );
@@ -5708,6 +5827,11 @@ var usePuck = () => {
     getPermissions,
     refreshPermissions
   } = useAppContext();
+  if (dispatch === defaultContext.dispatch) {
+    throw new Error(
+      "usePuck was used outside of the <Puck> component. The usePuck hook must be rendered within the <Puck> context as children, overrides or plugins as described in https://puckeditor.com/docs/api-reference/functions/use-puck."
+    );
+  }
   return {
     appState,
     config,
@@ -5757,25 +5881,33 @@ classnames/index.js:
   	http://jedwatson.github.io/classnames
   *)
 
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/defaultAttributes.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/Icon.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/check-circle.js:
+lucide-react/dist/esm/createLucideIcon.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5783,7 +5915,7 @@ lucide-react/dist/esm/icons/check-circle.js:
 
 lucide-react/dist/esm/icons/chevron-down.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5791,7 +5923,7 @@ lucide-react/dist/esm/icons/chevron-down.js:
 
 lucide-react/dist/esm/icons/chevron-right.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5799,7 +5931,15 @@ lucide-react/dist/esm/icons/chevron-right.js:
 
 lucide-react/dist/esm/icons/chevron-up.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/circle-check-big.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5807,7 +5947,15 @@ lucide-react/dist/esm/icons/chevron-up.js:
 
 lucide-react/dist/esm/icons/copy.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/ellipsis-vertical.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5815,7 +5963,7 @@ lucide-react/dist/esm/icons/copy.js:
 
 lucide-react/dist/esm/icons/globe.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5823,7 +5971,7 @@ lucide-react/dist/esm/icons/globe.js:
 
 lucide-react/dist/esm/icons/hash.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5831,7 +5979,7 @@ lucide-react/dist/esm/icons/hash.js:
 
 lucide-react/dist/esm/icons/layers.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5839,7 +5987,7 @@ lucide-react/dist/esm/icons/layers.js:
 
 lucide-react/dist/esm/icons/layout-grid.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5847,7 +5995,7 @@ lucide-react/dist/esm/icons/layout-grid.js:
 
 lucide-react/dist/esm/icons/link.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5855,31 +6003,31 @@ lucide-react/dist/esm/icons/link.js:
 
 lucide-react/dist/esm/icons/list.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/lock.js:
+lucide-react/dist/esm/icons/lock-open.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/monitor.js:
+lucide-react/dist/esm/icons/lock.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    *)
 
-lucide-react/dist/esm/icons/more-vertical.js:
+lucide-react/dist/esm/icons/monitor.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5887,7 +6035,7 @@ lucide-react/dist/esm/icons/more-vertical.js:
 
 lucide-react/dist/esm/icons/panel-left.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5895,7 +6043,7 @@ lucide-react/dist/esm/icons/panel-left.js:
 
 lucide-react/dist/esm/icons/panel-right.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5903,7 +6051,7 @@ lucide-react/dist/esm/icons/panel-right.js:
 
 lucide-react/dist/esm/icons/plus.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5911,7 +6059,7 @@ lucide-react/dist/esm/icons/plus.js:
 
 lucide-react/dist/esm/icons/redo-2.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5919,7 +6067,7 @@ lucide-react/dist/esm/icons/redo-2.js:
 
 lucide-react/dist/esm/icons/search.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5927,7 +6075,7 @@ lucide-react/dist/esm/icons/search.js:
 
 lucide-react/dist/esm/icons/sliders-horizontal.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5935,7 +6083,7 @@ lucide-react/dist/esm/icons/sliders-horizontal.js:
 
 lucide-react/dist/esm/icons/smartphone.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5943,7 +6091,7 @@ lucide-react/dist/esm/icons/smartphone.js:
 
 lucide-react/dist/esm/icons/tablet.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5951,7 +6099,7 @@ lucide-react/dist/esm/icons/tablet.js:
 
 lucide-react/dist/esm/icons/trash.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5959,7 +6107,7 @@ lucide-react/dist/esm/icons/trash.js:
 
 lucide-react/dist/esm/icons/type.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5967,15 +6115,7 @@ lucide-react/dist/esm/icons/type.js:
 
 lucide-react/dist/esm/icons/undo-2.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/icons/unlock.js:
-  (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5983,7 +6123,7 @@ lucide-react/dist/esm/icons/unlock.js:
 
 lucide-react/dist/esm/icons/zoom-in.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5991,7 +6131,7 @@ lucide-react/dist/esm/icons/zoom-in.js:
 
 lucide-react/dist/esm/icons/zoom-out.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -5999,7 +6139,7 @@ lucide-react/dist/esm/icons/zoom-out.js:
 
 lucide-react/dist/esm/lucide-react.js:
   (**
-   * @license lucide-react v0.298.0 - ISC
+   * @license lucide-react v0.468.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.