@measured/puck 0.17.0-canary.552c8f9 → 0.17.0-canary.5e57623

package/dist/index.mjs

@@ -29,8 +29,8 @@ var require_classnames = __commonJS({
       var nativeCodeString = "[native code]";
       function classNames() {
         var classes = [];
-        for (var i2 = 0; i2 < arguments.length; i2++) {
-          var arg = arguments[i2];
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
           if (!arg) continue;
           var argType = typeof arg;
           if (argType === "string" || argType === "number") {
@@ -137,9 +137,9 @@ var getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (o
     for (let modifier in modifiers) {
       prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
     }
-    const c2 = styles2[rootClass];
+    const c = styles2[rootClass];
     return config.baseClass + (0, import_classnames.default)(__spreadValues({
-      [c2]: !!c2
+      [c]: !!c
     }, prefixedModifiers));
   } else {
     return config.baseClass + styles2[rootClass] || "";
@@ -149,7 +149,7 @@ var get_class_name_factory_default = getClassNameFactory;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "ActionBar": "_ActionBar_151w5_1", "ActionBar-actionsLabel": "_ActionBar-actionsLabel_151w5_16", "ActionBar-group": "_ActionBar-group_151w5_29", "ActionBar-action": "_ActionBar-action_151w5_16" };
+var styles_module_default = { "ActionBar": "_ActionBar_1lbm7_1", "ActionBar-label": "_ActionBar-label_1lbm7_18", "ActionBar-action": "_ActionBar-action_1lbm7_30", "ActionBar-group": "_ActionBar-group_1lbm7_38" };
 
 // components/ActionBar/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -157,10 +157,19 @@ var getClassName = get_class_name_factory_default("ActionBar", styles_module_def
 var ActionBar = ({
   label,
   children
-}) => /* @__PURE__ */ jsxs("div", { className: getClassName(), children: [
-  label && /* @__PURE__ */ jsx("div", { className: getClassName("actionsLabel"), children: label }),
-  children
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: getClassName(),
+    onClick: (e) => {
+      e.stopPropagation();
+    },
+    children: [
+      label && /* @__PURE__ */ jsx(ActionBar.Group, { children: /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label }) }),
+      children
+    ]
+  }
+);
 var Action = ({
   children,
   label,
@@ -176,7 +185,9 @@ var Action = ({
   }
 );
 var Group = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassName("group"), children });
+var Label = ({ label }) => /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label });
 ActionBar.Action = Action;
+ActionBar.Label = Label;
 ActionBar.Group = Group;
 
 // components/AutoField/index.tsx
@@ -283,6 +294,13 @@ 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/corner-left-up.js
+init_react_import();
+var CornerLeftUp = createLucideIcon("CornerLeftUp", [
+  ["polyline", { points: "14 9 9 4 4 9", key: "m9oyvo" }],
+  ["path", { d: "M20 20h-7a4 4 0 0 1-4-4V4", key: "1blwi3" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/globe.js
 init_react_import();
 var Globe = createLucideIcon("Globe", [
@@ -567,10 +585,10 @@ var IconButton = ({
         disabled,
         fullWidth
       }),
-      onClick: (e2) => {
+      onClick: (e) => {
         if (!onClick) return;
         setLoading(true);
-        Promise.resolve(onClick(e2)).then(() => {
+        Promise.resolve(onClick(e)).then(() => {
           setLoading(false);
         });
       },
@@ -647,7 +665,7 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
   const [resolvedPermissions, setResolvedPermissions] = useState2({});
   const resolveDataForItem = useCallback(
     (item, force = false) => __async(void 0, null, function* () {
-      var _a, _b, _c3;
+      var _a, _b, _c;
       const componentConfig = item.type === "root" ? config.root : config.components[item.type];
       if (!componentConfig) {
         return;
@@ -664,7 +682,7 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
               lastPermissions: ((_b = cache[item.props.id]) == null ? void 0 : _b.lastPermissions) || null,
               permissions: initialPermissions,
               appState,
-              lastData: ((_c3 = cache[item.props.id]) == null ? void 0 : _c3.lastData) || null
+              lastData: ((_c = cache[item.props.id]) == null ? void 0 : _c.lastData) || null
             }
           );
           setCache((_cache) => __spreadProps(__spreadValues({}, _cache), {
@@ -673,7 +691,7 @@ var useResolvedPermissions = (config, appState, globalPermissions, setComponentL
               lastPermissions: resolvedPermissions2
             }
           }));
-          setResolvedPermissions((p2) => __spreadProps(__spreadValues({}, p2), {
+          setResolvedPermissions((p) => __spreadProps(__spreadValues({}, p), {
             [item.props.id]: resolvedPermissions2
           }));
           unsetComponentLoading == null ? void 0 : unsetComponentLoading(item.props.id);
@@ -1124,7 +1142,7 @@ var ArrayField = ({
   label,
   readOnly,
   id,
-  Label = (props) => /* @__PURE__ */ jsx9("div", __spreadValues({}, props))
+  Label: Label2 = (props) => /* @__PURE__ */ jsx9("div", __spreadValues({}, props))
 }) => {
   const { state, setUi, selectedItem, getPermissions } = useAppContext();
   const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
@@ -1189,7 +1207,7 @@ var ArrayField = ({
   }
   const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
   return /* @__PURE__ */ jsx9(
-    Label,
+    Label2,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsx9(List, { size: 16 }),
@@ -1234,27 +1252,27 @@ var ArrayField = ({
                   hasItems: Array.isArray(value) && value.length > 0,
                   addDisabled
                 }),
-                onMouseOver: (e2) => {
-                  e2.stopPropagation();
+                onMouseOver: (e) => {
+                  e.stopPropagation();
                   setHovering(true);
                 },
-                onMouseOut: (e2) => {
-                  e2.stopPropagation();
+                onMouseOut: (e) => {
+                  e.stopPropagation();
                   setHovering(false);
                 },
-                onClick: (e2) => {
-                  e2.preventDefault();
+                onClick: (e) => {
+                  e.preventDefault();
                 },
                 children: [
-                  localState.arrayState.items.map((item, i2) => {
-                    const { _arrayId = `${id}-${i2}`, _originalIndex = i2 } = item;
-                    const data = Array.from(localState.value || [])[i2] || {};
+                  localState.arrayState.items.map((item, i) => {
+                    const { _arrayId = `${id}-${i}`, _originalIndex = i } = item;
+                    const data = Array.from(localState.value || [])[i] || {};
                     return /* @__PURE__ */ jsx9(
                       Draggable,
                       {
                         id: _arrayId,
-                        index: i2,
-                        className: (_2, snapshot2) => getClassNameItem({
+                        index: i,
+                        className: (_, snapshot2) => getClassNameItem({
                           isExpanded: arrayState.openId === _arrayId,
                           isDragging: snapshot2 == null ? void 0 : snapshot2.isDragging,
                           readOnly
@@ -1281,7 +1299,7 @@ var ArrayField = ({
                               },
                               className: getClassNameItem("summary"),
                               children: [
-                                field.getItemSummary ? field.getItemSummary(data, i2) : `Item #${_originalIndex}`,
+                                field.getItemSummary ? field.getItemSummary(data, i) : `Item #${_originalIndex}`,
                                 /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("rhs"), children: [
                                   !readOnly && /* @__PURE__ */ jsxs4("div", { className: getClassNameItem("actions"), children: [
                                     /* @__PURE__ */ jsx9("div", { className: getClassNameItem("action"), children: /* @__PURE__ */ jsx9(
@@ -1289,15 +1307,15 @@ var ArrayField = ({
                                       {
                                         type: "button",
                                         disabled: !!addDisabled,
-                                        onClick: (e2) => {
-                                          e2.stopPropagation();
+                                        onClick: (e) => {
+                                          e.stopPropagation();
                                           const existingValue = [
                                             ...value || []
                                           ];
                                           existingValue.splice(
-                                            i2,
+                                            i,
                                             0,
-                                            existingValue[i2]
+                                            existingValue[i]
                                           );
                                           onChange(
                                             existingValue,
@@ -1315,16 +1333,16 @@ var ArrayField = ({
                                       {
                                         type: "button",
                                         disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
-                                        onClick: (e2) => {
-                                          e2.stopPropagation();
+                                        onClick: (e) => {
+                                          e.stopPropagation();
                                           const existingValue = [
                                             ...value || []
                                           ];
                                           const existingItems = [
                                             ...arrayState.items || []
                                           ];
-                                          existingValue.splice(i2, 1);
-                                          existingItems.splice(i2, 1);
+                                          existingValue.splice(i, 1);
+                                          existingItems.splice(i, 1);
                                           onChange(
                                             existingValue,
                                             mapArrayStateToUi({
@@ -1345,7 +1363,7 @@ var ArrayField = ({
                           /* @__PURE__ */ jsx9("div", { className: getClassNameItem("body"), children: /* @__PURE__ */ jsx9("fieldset", { className: getClassNameItem("fieldset"), children: Object.keys(field.arrayFields).map(
                             (fieldName) => {
                               const subField = field.arrayFields[fieldName];
-                              const subFieldName = `${name}[${i2}].${fieldName}`;
+                              const subFieldName = `${name}[${i}].${fieldName}`;
                               const wildcardFieldName = `${name}[*].${fieldName}`;
                               const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subFieldName] !== "undefined" ? readOnlyFields[subFieldName] : readOnlyFields[wildcardFieldName];
                               return /* @__PURE__ */ jsx9(
@@ -1359,7 +1377,7 @@ var ArrayField = ({
                                   value: data[fieldName],
                                   onChange: (val, ui) => {
                                     onChange(
-                                      replace(value, i2, __spreadProps(__spreadValues({}, data), {
+                                      replace(value, i, __spreadProps(__spreadValues({}, data), {
                                         [fieldName]: val
                                       })),
                                       ui
@@ -1414,11 +1432,11 @@ var DefaultField = ({
   value,
   name,
   label,
-  Label,
+  Label: Label2,
   id
 }) => {
   return /* @__PURE__ */ jsx10(
-    Label,
+    Label2,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsxs5(Fragment6, { children: [
@@ -1434,11 +1452,11 @@ var DefaultField = ({
           type: field.type,
           name,
           value: typeof value === "undefined" ? "" : value.toString(),
-          onChange: (e2) => {
+          onChange: (e) => {
             if (field.type === "number") {
-              onChange(Number(e2.currentTarget.value));
+              onChange(Number(e.currentTarget.value));
             } else {
-              onChange(e2.currentTarget.value);
+              onChange(e.currentTarget.value);
             }
           },
           readOnly,
@@ -1499,7 +1517,7 @@ var Modal = ({
       "div",
       {
         className: getClassName7("inner"),
-        onClick: (e2) => e2.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
         children
       }
     ) }),
@@ -1571,10 +1589,10 @@ var Button = ({
         fullWidth,
         [size]: true
       }),
-      onClick: (e2) => {
+      onClick: (e) => {
         if (!onClick) return;
         setLoading(true);
-        Promise.resolve(onClick(e2)).then(() => {
+        Promise.resolve(onClick(e)).then(() => {
           setLoading(false);
         });
       },
@@ -1703,8 +1721,8 @@ var ExternalInput = ({
               hasData: mappedData.length > 0,
               filtersToggled
             }),
-            onSubmit: (e2) => {
-              e2.preventDefault();
+            onSubmit: (e) => {
+              e.preventDefault();
               search(searchQuery, filters);
             },
             children: [
@@ -1719,8 +1737,8 @@ var ExternalInput = ({
                       name: "q",
                       type: "search",
                       placeholder: field.placeholder,
-                      onChange: (e2) => {
-                        setSearchQuery(e2.currentTarget.value);
+                      onChange: (e) => {
+                        setSearchQuery(e.currentTarget.value);
                       },
                       autoComplete: "off",
                       value: searchQuery
@@ -1733,9 +1751,9 @@ var ExternalInput = ({
                     IconButton,
                     {
                       title: "Toggle filters",
-                      onClick: (e2) => {
-                        e2.preventDefault();
-                        e2.stopPropagation();
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
                       children: /* @__PURE__ */ jsx14(SlidersHorizontal, { size: 20 })
@@ -1774,19 +1792,19 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx14("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i2) => {
+                    /* @__PURE__ */ jsx14("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
                       return /* @__PURE__ */ jsx14(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
                           className: getClassNameModal("tr"),
                           onClick: () => {
-                            onChange(mapProp(data[i2]));
+                            onChange(mapProp(data[i]));
                             setOpen(false);
                           },
                           children: keys.map((key) => /* @__PURE__ */ jsx14("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
-                        i2
+                        i
                       );
                     }) })
                   ] }),
@@ -1810,11 +1828,11 @@ var ExternalField = ({
   value,
   name,
   label,
-  Label,
+  Label: Label2,
   id,
   readOnly
 }) => {
-  var _a, _b, _c3;
+  var _a, _b, _c;
   const validField = field;
   const deprecatedField = field;
   useEffect8(() => {
@@ -1827,7 +1845,7 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx15(Label, { label: label || name, icon: /* @__PURE__ */ jsx15(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15(Label2, { label: label || name, icon: /* @__PURE__ */ jsx15(Link, { size: 16 }), el: "div", children: /* @__PURE__ */ jsx15(
     ExternalInput,
     {
       name,
@@ -1836,7 +1854,7 @@ var ExternalField = ({
         placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
         mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
         mapRow: validField.mapRow,
-        fetchList: ((_c3 = deprecatedField.adaptor) == null ? void 0 : _c3.fetchList) ? () => __async(void 0, null, function* () {
+        fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
           return yield deprecatedField.adaptor.fetchList(
             deprecatedField.adaptorParams
           );
@@ -1862,13 +1880,13 @@ var RadioField = ({
   name,
   id,
   label,
-  Label
+  Label: Label2
 }) => {
   if (field.type !== "radio" || !field.options) {
     return null;
   }
   return /* @__PURE__ */ jsx16(
-    Label,
+    Label2,
     {
       icon: /* @__PURE__ */ jsx16(CheckCircle, { size: 16 }),
       label: label || name,
@@ -1886,12 +1904,12 @@ var RadioField = ({
                 className: getClassName11("radioInput"),
                 value: option.value,
                 name,
-                onChange: (e2) => {
-                  if (e2.currentTarget.value === "true" || e2.currentTarget.value === "false") {
-                    onChange(JSON.parse(e2.currentTarget.value));
+                onChange: (e) => {
+                  if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+                    onChange(JSON.parse(e.currentTarget.value));
                     return;
                   }
-                  onChange(e2.currentTarget.value);
+                  onChange(e.currentTarget.value);
                 },
                 disabled: readOnly,
                 checked: value === option.value
@@ -1914,7 +1932,7 @@ var SelectField = ({
   field,
   onChange,
   label,
-  Label,
+  Label: Label2,
   value,
   name,
   readOnly,
@@ -1924,7 +1942,7 @@ var SelectField = ({
     return null;
   }
   return /* @__PURE__ */ jsx17(
-    Label,
+    Label2,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsx17(ChevronDown, { size: 16 }),
@@ -1935,12 +1953,12 @@ var SelectField = ({
           id,
           className: getClassName12("input"),
           disabled: readOnly,
-          onChange: (e2) => {
-            if (e2.currentTarget.value === "true" || e2.currentTarget.value === "false") {
-              onChange(JSON.parse(e2.currentTarget.value));
+          onChange: (e) => {
+            if (e.currentTarget.value === "true" || e.currentTarget.value === "false") {
+              onChange(JSON.parse(e.currentTarget.value));
               return;
             }
-            onChange(e2.currentTarget.value);
+            onChange(e.currentTarget.value);
           },
           value,
           children: field.options.map((option) => /* @__PURE__ */ jsx17(
@@ -1967,10 +1985,10 @@ var TextareaField = ({
   value,
   name,
   label,
-  Label,
+  Label: Label2,
   id
 }) => {
-  return /* @__PURE__ */ jsx18(Label, { label: label || name, icon: /* @__PURE__ */ jsx18(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx18(Label2, { label: label || name, icon: /* @__PURE__ */ jsx18(Type, { size: 16 }), readOnly, children: /* @__PURE__ */ jsx18(
     "textarea",
     {
       id,
@@ -1978,7 +1996,7 @@ var TextareaField = ({
       autoComplete: "off",
       name,
       value: typeof value === "undefined" ? "" : value,
-      onChange: (e2) => onChange(e2.currentTarget.value),
+      onChange: (e) => onChange(e.currentTarget.value),
       readOnly,
       tabIndex: readOnly ? -1 : void 0,
       rows: 5
@@ -2005,7 +2023,7 @@ var ObjectField = ({
   value,
   name,
   label,
-  Label,
+  Label: Label2,
   readOnly,
   id
 }) => {
@@ -2016,7 +2034,7 @@ var ObjectField = ({
   const readOnlyFields = (selectedItem == null ? void 0 : selectedItem.readOnly) || {};
   const data = value || {};
   return /* @__PURE__ */ jsx19(
-    Label,
+    Label2,
     {
       label: label || name,
       icon: /* @__PURE__ */ jsx19(MoreVertical, { size: 16 }),
@@ -2120,9 +2138,9 @@ var FieldLabelInternal2 = ({
   );
 };
 function AutoFieldInternal(props) {
-  var _a, _b, _c3, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { dispatch, overrides } = useAppContext();
-  const { id, Label = FieldLabelInternal2 } = props;
+  const { id, Label: Label2 = FieldLabelInternal2 } = props;
   const field = props.field;
   const label = field.label;
   const defaultId = useSafeId();
@@ -2140,7 +2158,7 @@ function AutoFieldInternal(props) {
   const render = __spreadProps(__spreadValues({}, overrides.fieldTypes), {
     array: ((_a = overrides.fieldTypes) == null ? void 0 : _a.array) || defaultFields.array,
     external: ((_b = overrides.fieldTypes) == null ? void 0 : _b.external) || defaultFields.external,
-    object: ((_c3 = overrides.fieldTypes) == null ? void 0 : _c3.object) || defaultFields.object,
+    object: ((_c = overrides.fieldTypes) == null ? void 0 : _c.object) || defaultFields.object,
     select: ((_d = overrides.fieldTypes) == null ? void 0 : _d.select) || defaultFields.select,
     textarea: ((_e = overrides.fieldTypes) == null ? void 0 : _e.textarea) || defaultFields.textarea,
     radio: ((_f = overrides.fieldTypes) == null ? void 0 : _f.radio) || defaultFields.radio,
@@ -2150,13 +2168,13 @@ function AutoFieldInternal(props) {
   const mergedProps = __spreadProps(__spreadValues({}, props), {
     field,
     label,
-    Label,
+    Label: Label2,
     id: resolvedId
   });
   const onFocus = useCallback5(
-    (e2) => {
-      if (mergedProps.name && e2.target.nodeName === "INPUT") {
-        e2.stopPropagation();
+    (e) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
         dispatch({
           type: "setUi",
           ui: {
@@ -2167,8 +2185,8 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback5((e2) => {
-    if ("name" in e2.target) {
+  const onBlur = useCallback5((e) => {
+    if ("name" in e.target) {
       dispatch({
         type: "setUi",
         ui: {
@@ -2248,7 +2266,7 @@ import {
   useRef as useRef5,
   useState as useState15
 } from "react";
-import { defaultPreset } from "@dnd-kit/dom";
+import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
 // components/DropZone/index.tsx
 init_react_import();
@@ -2307,982 +2325,21 @@ import { createPortal as createPortal2 } from "react-dom";
 
 // components/DraggableComponent/collision/dynamic/index.ts
 init_react_import();
-
-// ../../node_modules/@dnd-kit/abstract/index.js
-init_react_import();
-
-// ../../node_modules/@dnd-kit/state/dist/index.mjs
-init_react_import();
-
-// ../../node_modules/@preact/signals-core/dist/signals-core.mjs
-init_react_import();
-var i = Symbol.for("preact-signals");
-function t() {
-  if (r > 1) {
-    r--;
-    return;
-  }
-  let i2, t2 = false;
-  while (void 0 !== s) {
-    let o2 = s;
-    s = void 0;
-    f++;
-    while (void 0 !== o2) {
-      const n2 = o2.o;
-      o2.o = void 0;
-      o2.f &= -3;
-      if (!(8 & o2.f) && v(o2)) try {
-        o2.c();
-      } catch (o3) {
-        if (!t2) {
-          i2 = o3;
-          t2 = true;
-        }
-      }
-      o2 = n2;
-    }
-  }
-  f = 0;
-  r--;
-  if (t2) throw i2;
-}
-function o(i2) {
-  if (r > 0) return i2();
-  r++;
-  try {
-    return i2();
-  } finally {
-    t();
-  }
-}
-var n;
-var s;
-function h(i2) {
-  const t2 = n;
-  n = void 0;
-  try {
-    return i2();
-  } finally {
-    n = t2;
-  }
-}
-var r = 0;
-var f = 0;
-var e = 0;
-function c(i2) {
-  if (void 0 === n) return;
-  let t2 = i2.n;
-  if (void 0 === t2 || t2.t !== n) {
-    t2 = { i: 0, S: i2, p: n.s, n: void 0, t: n, e: void 0, x: void 0, r: t2 };
-    if (void 0 !== n.s) n.s.n = t2;
-    n.s = t2;
-    i2.n = t2;
-    if (32 & n.f) i2.S(t2);
-    return t2;
-  } else if (-1 === t2.i) {
-    t2.i = 0;
-    if (void 0 !== t2.n) {
-      t2.n.p = t2.p;
-      if (void 0 !== t2.p) t2.p.n = t2.n;
-      t2.p = n.s;
-      t2.n = void 0;
-      n.s.n = t2;
-      n.s = t2;
-    }
-    return t2;
-  }
-}
-function u(i2) {
-  this.v = i2;
-  this.i = 0;
-  this.n = void 0;
-  this.t = void 0;
-}
-u.prototype.brand = i;
-u.prototype.h = function() {
-  return true;
-};
-u.prototype.S = function(i2) {
-  if (this.t !== i2 && void 0 === i2.e) {
-    i2.x = this.t;
-    if (void 0 !== this.t) this.t.e = i2;
-    this.t = i2;
-  }
-};
-u.prototype.U = function(i2) {
-  if (void 0 !== this.t) {
-    const t2 = i2.e, o2 = i2.x;
-    if (void 0 !== t2) {
-      t2.x = o2;
-      i2.e = void 0;
-    }
-    if (void 0 !== o2) {
-      o2.e = t2;
-      i2.x = void 0;
-    }
-    if (i2 === this.t) this.t = o2;
-  }
-};
-u.prototype.subscribe = function(i2) {
-  return E(() => {
-    const t2 = this.value, o2 = n;
-    n = void 0;
-    try {
-      i2(t2);
-    } finally {
-      n = o2;
-    }
-  });
-};
-u.prototype.valueOf = function() {
-  return this.value;
-};
-u.prototype.toString = function() {
-  return this.value + "";
-};
-u.prototype.toJSON = function() {
-  return this.value;
-};
-u.prototype.peek = function() {
-  const i2 = n;
-  n = void 0;
-  try {
-    return this.value;
-  } finally {
-    n = i2;
-  }
-};
-Object.defineProperty(u.prototype, "value", { get() {
-  const i2 = c(this);
-  if (void 0 !== i2) i2.i = this.i;
-  return this.v;
-}, set(i2) {
-  if (i2 !== this.v) {
-    if (f > 100) throw new Error("Cycle detected");
-    this.v = i2;
-    this.i++;
-    e++;
-    r++;
-    try {
-      for (let i3 = this.t; void 0 !== i3; i3 = i3.x) i3.t.N();
-    } finally {
-      t();
-    }
-  }
-} });
-function d(i2) {
-  return new u(i2);
-}
-function v(i2) {
-  for (let t2 = i2.s; void 0 !== t2; t2 = t2.n) if (t2.S.i !== t2.i || !t2.S.h() || t2.S.i !== t2.i) return true;
-  return false;
-}
-function l(i2) {
-  for (let t2 = i2.s; void 0 !== t2; t2 = t2.n) {
-    const o2 = t2.S.n;
-    if (void 0 !== o2) t2.r = o2;
-    t2.S.n = t2;
-    t2.i = -1;
-    if (void 0 === t2.n) {
-      i2.s = t2;
-      break;
-    }
-  }
-}
-function y(i2) {
-  let t2, o2 = i2.s;
-  while (void 0 !== o2) {
-    const i3 = o2.p;
-    if (-1 === o2.i) {
-      o2.S.U(o2);
-      if (void 0 !== i3) i3.n = o2.n;
-      if (void 0 !== o2.n) o2.n.p = i3;
-    } else t2 = o2;
-    o2.S.n = o2.r;
-    if (void 0 !== o2.r) o2.r = void 0;
-    o2 = i3;
-  }
-  i2.s = t2;
-}
-function a(i2) {
-  u.call(this, void 0);
-  this.x = i2;
-  this.s = void 0;
-  this.g = e - 1;
-  this.f = 4;
-}
-(a.prototype = new u()).h = function() {
-  this.f &= -3;
-  if (1 & this.f) return false;
-  if (32 == (36 & this.f)) return true;
-  this.f &= -5;
-  if (this.g === e) return true;
-  this.g = e;
-  this.f |= 1;
-  if (this.i > 0 && !v(this)) {
-    this.f &= -2;
-    return true;
-  }
-  const i2 = n;
-  try {
-    l(this);
-    n = this;
-    const i3 = this.x();
-    if (16 & this.f || this.v !== i3 || 0 === this.i) {
-      this.v = i3;
-      this.f &= -17;
-      this.i++;
-    }
-  } catch (i3) {
-    this.v = i3;
-    this.f |= 16;
-    this.i++;
-  }
-  n = i2;
-  y(this);
-  this.f &= -2;
-  return true;
-};
-a.prototype.S = function(i2) {
-  if (void 0 === this.t) {
-    this.f |= 36;
-    for (let i3 = this.s; void 0 !== i3; i3 = i3.n) i3.S.S(i3);
-  }
-  u.prototype.S.call(this, i2);
-};
-a.prototype.U = function(i2) {
-  if (void 0 !== this.t) {
-    u.prototype.U.call(this, i2);
-    if (void 0 === this.t) {
-      this.f &= -33;
-      for (let i3 = this.s; void 0 !== i3; i3 = i3.n) i3.S.U(i3);
-    }
-  }
-};
-a.prototype.N = function() {
-  if (!(2 & this.f)) {
-    this.f |= 6;
-    for (let i2 = this.t; void 0 !== i2; i2 = i2.x) i2.t.N();
-  }
-};
-Object.defineProperty(a.prototype, "value", { get() {
-  if (1 & this.f) throw new Error("Cycle detected");
-  const i2 = c(this);
-  this.h();
-  if (void 0 !== i2) i2.i = this.i;
-  if (16 & this.f) throw this.v;
-  return this.v;
-} });
-function w(i2) {
-  return new a(i2);
-}
-function _(i2) {
-  const o2 = i2.u;
-  i2.u = void 0;
-  if ("function" == typeof o2) {
-    r++;
-    const s2 = n;
-    n = void 0;
-    try {
-      o2();
-    } catch (t2) {
-      i2.f &= -2;
-      i2.f |= 8;
-      g(i2);
-      throw t2;
-    } finally {
-      n = s2;
-      t();
-    }
-  }
-}
-function g(i2) {
-  for (let t2 = i2.s; void 0 !== t2; t2 = t2.n) t2.S.U(t2);
-  i2.x = void 0;
-  i2.s = void 0;
-  _(i2);
-}
-function p(i2) {
-  if (n !== this) throw new Error("Out-of-order effect");
-  y(this);
-  n = i2;
-  this.f &= -2;
-  if (8 & this.f) g(this);
-  t();
-}
-function b(i2) {
-  this.x = i2;
-  this.u = void 0;
-  this.s = void 0;
-  this.o = void 0;
-  this.f = 32;
-}
-b.prototype.c = function() {
-  const i2 = this.S();
-  try {
-    if (8 & this.f) return;
-    if (void 0 === this.x) return;
-    const t2 = this.x();
-    if ("function" == typeof t2) this.u = t2;
-  } finally {
-    i2();
-  }
-};
-b.prototype.S = function() {
-  if (1 & this.f) throw new Error("Cycle detected");
-  this.f |= 1;
-  this.f &= -9;
-  _(this);
-  l(this);
-  r++;
-  const i2 = n;
-  n = this;
-  return p.bind(this, i2);
-};
-b.prototype.N = function() {
-  if (!(2 & this.f)) {
-    this.f |= 2;
-    this.o = s;
-    s = this;
-  }
-};
-b.prototype.d = function() {
-  this.f |= 8;
-  if (!(1 & this.f)) g(this);
-};
-function E(i2) {
-  const t2 = new b(i2);
-  try {
-    t2.c();
-  } catch (i3) {
-    t2.d();
-    throw i3;
-  }
-  return t2.d.bind(t2);
-}
-
-// ../../node_modules/@dnd-kit/state/dist/index.mjs
-function computed(compute, comparator) {
-  if (comparator) {
-    let previousValue;
-    return w(() => {
-      const value = compute();
-      if (value && previousValue && comparator(previousValue, value)) {
-        return previousValue;
-      }
-      previousValue = value;
-      return value;
-    });
-  }
-  return w(compute);
-}
-function reactive({ get }, _2) {
-  return {
-    init(value) {
-      return d(value);
-    },
-    get() {
-      const current = get.call(this);
-      return current.value;
-    },
-    set(newValue) {
-      const current = get.call(this);
-      if (current.peek() === newValue) {
-        return;
-      }
-      current.value = newValue;
-    }
-  };
-}
-function derived(target, _2) {
-  const map = /* @__PURE__ */ new WeakMap();
-  return function() {
-    let result = map.get(this);
-    if (!result) {
-      result = computed(target.bind(this));
-      map.set(this, result);
-    }
-    return result.value;
-  };
-}
-function effects(...entries) {
-  const effects2 = entries.map(E);
-  return () => effects2.forEach((cleanup) => cleanup());
-}
-
-// ../../node_modules/@dnd-kit/geometry/dist/index.mjs
-init_react_import();
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __pow = Math.pow;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __decoratorStart = (base) => {
-  var _a;
-  return [, , , __create((_a = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a : null)];
-};
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
-    return __privateGet2(this, extra);
-  }, set [name](x) {
-    return __privateSet2(this, extra, x);
-  } }, name));
-  k ? p2 && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
-  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet2 : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet2(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
-    }
-    it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet2 = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd2 = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet2 = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var Point = class _Point {
-  /**
-   * @param {number} Coordinate of the point on the horizontal axis
-   * @param {number} Coordinate of the point on the vertical axis
-   */
-  constructor(x, y2) {
-    this.x = x;
-    this.y = y2;
-  }
-  /**
-   * Returns the delta between this point and another point.
-   *
-   * @param {Point} a - A point
-   * @param {Point} b - Another point
-   */
-  static delta(a2, b2) {
-    return new _Point(a2.x - b2.x, a2.y - b2.y);
-  }
-  /**
-   * Returns the distance (hypotenuse) between this point and another point.
-   *
-   * @param {Point} a - A point
-   * @param {Point} b - Another point
-   */
-  static distance(a2, b2) {
-    return Math.hypot(a2.x - b2.x, a2.y - b2.y);
-  }
-  /**
-   * Returns true if both points are equal.
-   *
-   * @param {Point} a - A point
-   * @param {Point} b - Another point
-   */
-  static equals(a2, b2) {
-    return a2.x === b2.x && a2.y === b2.y;
-  }
-  static from({ x, y: y2 }) {
-    return new _Point(x, y2);
-  }
-};
-var SENSITIVITY = 10;
-var _direction_dec;
-var _delta_dec;
-var _current_dec;
-var _previous_dec;
-var _initial_dec;
-var _velocity_dec;
-var _timestamp;
-var _init;
-var _velocity;
-var _initial;
-var _previous;
-var _current;
-_velocity_dec = [reactive], _initial_dec = [reactive], _previous_dec = [reactive], _current_dec = [reactive], _delta_dec = [derived], _direction_dec = [derived];
-var Position = class {
-  constructor(initialValue) {
-    __runInitializers(_init, 5, this);
-    __privateAdd2(this, _timestamp, 0);
-    __privateAdd2(this, _velocity, __runInitializers(_init, 8, this, {
-      x: 0,
-      y: 0
-    })), __runInitializers(_init, 11, this);
-    __privateAdd2(this, _initial, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd2(this, _previous, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __privateAdd2(this, _current, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    const point = Point.from(initialValue);
-    this.initial = point;
-    this.current = point;
-    this.previous = point;
-  }
-  get delta() {
-    return Point.delta(this.current, this.initial);
-  }
-  get direction() {
-    const delta = {
-      x: this.current.x - this.previous.x,
-      y: this.current.y - this.previous.y
-    };
-    if (!delta.x && !delta.y) {
-      return null;
-    }
-    if (Math.abs(delta.x) > Math.abs(delta.y)) {
-      return delta.x > 0 ? "right" : "left";
-    }
-    return delta.y > 0 ? "down" : "up";
-  }
-  reset(coordinates) {
-    const point = Point.from(coordinates);
-    o(() => {
-      __privateSet2(this, _timestamp, 0);
-      this.velocity = { x: 0, y: 0 };
-      this.current = point;
-      this.previous = point;
-      this.initial = point;
-    });
-  }
-  update(coordinates) {
-    const { current } = this;
-    const point = Point.from(coordinates);
-    if (Point.equals(current, point)) {
-      return;
-    }
-    const delta = {
-      x: point.x - current.x,
-      y: point.y - current.y
-    };
-    const timestamp = Date.now();
-    const timeDelta = timestamp - __privateGet2(this, _timestamp);
-    const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
-    if (Math.abs(delta.x) < SENSITIVITY || Math.abs(delta.y) < SENSITIVITY) {
-      this.previous = current;
-    }
-    __privateSet2(this, _timestamp, timestamp);
-    this.velocity = {
-      x: velocity(delta.x),
-      y: velocity(delta.y)
-    };
-    this.current = point;
-  }
-};
-_init = __decoratorStart(null);
-_timestamp = /* @__PURE__ */ new WeakMap();
-_velocity = /* @__PURE__ */ new WeakMap();
-_initial = /* @__PURE__ */ new WeakMap();
-_previous = /* @__PURE__ */ new WeakMap();
-_current = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "velocity", _velocity_dec, Position, _velocity);
-__decorateElement(_init, 4, "initial", _initial_dec, Position, _initial);
-__decorateElement(_init, 4, "previous", _previous_dec, Position, _previous);
-__decorateElement(_init, 4, "current", _current_dec, Position, _current);
-__decorateElement(_init, 2, "delta", _delta_dec, Position);
-__decorateElement(_init, 2, "direction", _direction_dec, Position);
-__decoratorMetadata(_init, Position);
-function exceedsDistance({ x, y: y2 }, distance) {
-  const dx = Math.abs(x);
-  const dy = Math.abs(y2);
-  if (typeof distance === "number") {
-    return Math.sqrt(__pow(dx, 2) + __pow(dy, 2)) > distance;
-  }
-  if ("x" in distance && "y" in distance) {
-    return dx > distance.x && dy > distance.y;
-  }
-  if ("x" in distance) {
-    return dx > distance.x;
-  }
-  if ("y" in distance) {
-    return dy > distance.y;
-  }
-  return false;
-}
-var Axis = /* @__PURE__ */ ((Axis2) => {
-  Axis2["Horizontal"] = "x";
-  Axis2["Vertical"] = "y";
-  return Axis2;
-})(Axis || {});
-var Axes = Object.values(Axis);
-
-// ../../node_modules/@dnd-kit/abstract/index.js
-var __create2 = Object.create;
-var __defProp2 = Object.defineProperty;
-var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __knownSymbol2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError2 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name2 = (target, value) => __defProp2(target, "name", { value, configurable: true });
-var __objRest2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __decoratorStart2 = (base) => {
-  var _a;
-  return [, , , __create2((_a = base == null ? void 0 : base[__knownSymbol2("metadata")]) != null ? _a : null)];
-};
-var __decoratorStrings2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError2("Function expected") : fn;
-var __decoratorContext2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError2("Already initialized") : fns.push(__expectFn2(fn || null)) });
-var __decoratorMetadata2 = (array, target) => __defNormalProp2(target, __knownSymbol2("metadata"), array[3]);
-var __runInitializers2 = (array, flags, self, value) => {
-  for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
-  return value;
-};
-var __decorateElement2 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings2[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc2(k < 4 ? target : { get [name]() {
-    return __privateGet3(this, extra);
-  }, set [name](x) {
-    return __privateSet3(this, extra, x);
-  } }, name));
-  k ? p2 && k < 4 && __name2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name2(target, name);
-  for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
-    ctx = __decoratorContext2(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn2(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet3 : __privateMethod2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet3(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
-    }
-    it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn2(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError2("Object expected");
-    else __expectFn2(fn = it.get) && (desc.get = fn), __expectFn2(fn = it.set) && (desc.set = fn), __expectFn2(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata2(array, target), desc && __defProp2(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
-};
-var __accessCheck2 = (obj, member, msg) => member.has(obj) || __typeError2("Cannot " + msg);
-var __privateIn2 = (member, obj) => Object(obj) !== obj ? __typeError2('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet3 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd3 = (obj, member, value) => member.has(obj) ? __typeError2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet3 = (obj, member, value, setter) => (__accessCheck2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod2 = (obj, member, method) => (__accessCheck2(obj, member, "access private method"), method);
-function configure(plugin, options) {
-  return {
-    plugin,
-    options
-  };
-}
-function configurator(plugin) {
-  return (options) => {
-    return configure(plugin, options);
-  };
-}
-var _disabled_dec;
-var _init2;
-var _disabled;
-_disabled_dec = [reactive];
-var Plugin = class {
-  constructor(manager, options) {
-    this.manager = manager;
-    this.options = options;
-    __privateAdd3(this, _disabled, __runInitializers2(_init2, 8, this, false)), __runInitializers2(_init2, 11, this);
-  }
-  /**
-   * Enable a disabled plugin instance.
-   * Triggers effects.
-   */
-  enable() {
-    this.disabled = false;
-  }
-  /**
-   * Disable an enabled plugin instance.
-   * Triggers effects.
-   */
-  disable() {
-    this.disabled = true;
-  }
-  /**
-   * Whether the plugin instance is disabled.
-   * Does not trigger effects when accessed.
-   */
-  isDisabled() {
-    return h(() => {
-      return this.disabled;
-    });
-  }
-  /**
-   * Configure a plugin instance with new options.
-   */
-  configure(options) {
-    this.options = options;
-  }
-  /**
-   * Destroy a plugin instance.
-   */
-  destroy() {
-  }
-  /**
-   * Configure a plugin constructor with options.
-   * This method is used to configure the options that the
-   * plugin constructor will use to create plugin instances.
-   */
-  static configure(options) {
-    return configure(this, options);
-  }
-};
-_init2 = __decoratorStart2(null);
-_disabled = /* @__PURE__ */ new WeakMap();
-__decorateElement2(_init2, 4, "disabled", _disabled_dec, Plugin, _disabled);
-__decoratorMetadata2(_init2, Plugin);
-var _previousValues;
-_previousValues = /* @__PURE__ */ new WeakMap();
-var _previousCoordinates;
-var _collisions;
-_previousCoordinates = /* @__PURE__ */ new WeakMap();
-_collisions = /* @__PURE__ */ new WeakMap();
-var CollisionPriority = /* @__PURE__ */ ((CollisionPriority2) => {
-  CollisionPriority2[CollisionPriority2["Lowest"] = 0] = "Lowest";
-  CollisionPriority2[CollisionPriority2["Low"] = 1] = "Low";
-  CollisionPriority2[CollisionPriority2["Normal"] = 2] = "Normal";
-  CollisionPriority2[CollisionPriority2["High"] = 3] = "High";
-  CollisionPriority2[CollisionPriority2["Highest"] = 4] = "Highest";
-  return CollisionPriority2;
-})(CollisionPriority || {});
-var CollisionType = /* @__PURE__ */ ((CollisionType2) => {
-  CollisionType2[CollisionType2["Collision"] = 0] = "Collision";
-  CollisionType2[CollisionType2["ShapeIntersection"] = 1] = "ShapeIntersection";
-  CollisionType2[CollisionType2["PointerIntersection"] = 2] = "PointerIntersection";
-  return CollisionType2;
-})(CollisionType || {});
-var _disabled_dec2;
-var _data_dec;
-var _id_dec;
-var _manager_dec;
-var _init22;
-var _manager;
-var _id;
-var _data;
-var _disabled2;
-_manager_dec = [reactive], _id_dec = [reactive], _data_dec = [reactive], _disabled_dec2 = [reactive];
-var Entity = class {
-  /**
-   * Creates a new instance of the `Entity` class.
-   *
-   * @param input - An object containing the initial properties of the entity.
-   * @param manager - The manager that controls the drag and drop operations.
-   */
-  constructor(input, manager) {
-    __privateAdd3(this, _manager, __runInitializers2(_init22, 8, this)), __runInitializers2(_init22, 11, this);
-    __privateAdd3(this, _id, __runInitializers2(_init22, 12, this)), __runInitializers2(_init22, 15, this);
-    __privateAdd3(this, _data, __runInitializers2(_init22, 16, this)), __runInitializers2(_init22, 19, this);
-    __privateAdd3(this, _disabled2, __runInitializers2(_init22, 20, this)), __runInitializers2(_init22, 23, this);
-    this.effects = void 0;
-    const { effects: effects5, id, data = {}, disabled = false } = input;
-    let previousId = id;
-    this.manager = manager;
-    this.id = id;
-    this.data = data;
-    this.disabled = disabled;
-    this.effects = () => {
-      var _a;
-      return [
-        () => {
-          const { id: id2, manager: manager2 } = this;
-          if (id2 === previousId) {
-            return;
-          }
-          manager2 == null ? void 0 : manager2.registry.register(this);
-          return () => manager2 == null ? void 0 : manager2.registry.unregister(this);
-        },
-        ...(_a = effects5 == null ? void 0 : effects5()) != null ? _a : []
-      ];
-    };
-    this.destroy = this.destroy.bind(this);
-    if (manager) {
-      queueMicrotask(() => {
-        var _a;
-        (_a = this.manager) == null ? void 0 : _a.registry.register(this);
-      });
-    }
-  }
-  /**
-   * A method that registers the entity with the manager.
-   * @returns CleanupFunction | void
-   */
-  register() {
-    var _a;
-    return (_a = this.manager) == null ? void 0 : _a.registry.register(this);
-  }
-  /**
-   * A method that unregisters the entity from the manager.
-   * @returns void
-   */
-  unregister() {
-    var _a;
-    (_a = this.manager) == null ? void 0 : _a.registry.unregister(this);
-  }
-  /**
-   * A method that cleans up the entity when it is no longer needed.
-   * @returns void
-   */
-  destroy() {
-    var _a;
-    (_a = this.manager) == null ? void 0 : _a.registry.unregister(this);
-  }
-};
-_init22 = __decoratorStart2(null);
-_manager = /* @__PURE__ */ new WeakMap();
-_id = /* @__PURE__ */ new WeakMap();
-_data = /* @__PURE__ */ new WeakMap();
-_disabled2 = /* @__PURE__ */ new WeakMap();
-__decorateElement2(_init22, 4, "manager", _manager_dec, Entity, _manager);
-__decorateElement2(_init22, 4, "id", _id_dec, Entity, _id);
-__decorateElement2(_init22, 4, "data", _data_dec, Entity, _data);
-__decorateElement2(_init22, 4, "disabled", _disabled_dec2, Entity, _disabled2);
-__decoratorMetadata2(_init22, Entity);
-var _isDragSource_dec;
-var _status_dec;
-var _type_dec;
-var _modifiers_dec;
-var _c;
-var _init3;
-var _modifiers;
-var _type;
-var _status;
-var Draggable2 = class extends (_c = Entity, _modifiers_dec = [reactive], _type_dec = [reactive], _status_dec = [reactive], _isDragSource_dec = [derived], _c) {
-  constructor(_a, manager) {
-    var _b = _a, { modifiers, type, sensors } = _b, input = __objRest2(_b, ["modifiers", "type", "sensors"]);
-    super(input, manager);
-    __runInitializers2(_init3, 5, this);
-    this.sensors = void 0;
-    __privateAdd3(this, _modifiers, __runInitializers2(_init3, 8, this)), __runInitializers2(_init3, 11, this);
-    __privateAdd3(this, _type, __runInitializers2(_init3, 12, this)), __runInitializers2(_init3, 15, this);
-    __privateAdd3(this, _status, __runInitializers2(_init3, 16, this, "idle")), __runInitializers2(_init3, 19, this);
-    this.type = type;
-    this.sensors = sensors;
-    this.modifiers = modifiers;
-  }
-  get isDragSource() {
-    var _a, _b;
-    return ((_b = (_a = this.manager) == null ? void 0 : _a.dragOperation.source) == null ? void 0 : _b.id) === this.id;
-  }
-};
-_init3 = __decoratorStart2(_c);
-_modifiers = /* @__PURE__ */ new WeakMap();
-_type = /* @__PURE__ */ new WeakMap();
-_status = /* @__PURE__ */ new WeakMap();
-__decorateElement2(_init3, 4, "modifiers", _modifiers_dec, Draggable2, _modifiers);
-__decorateElement2(_init3, 4, "type", _type_dec, Draggable2, _type);
-__decorateElement2(_init3, 4, "status", _status_dec, Draggable2, _status);
-__decorateElement2(_init3, 2, "isDragSource", _isDragSource_dec, Draggable2);
-__decoratorMetadata2(_init3, Draggable2);
-var _isDropTarget_dec;
-var _shape_dec;
-var _collisionPriority_dec;
-var _collisionDetector_dec;
-var _type_dec2;
-var _accept_dec;
-var _c2;
-var _init4;
-var _accept;
-var _type2;
-var _collisionDetector;
-var _collisionPriority;
-var _shape;
-var Droppable2 = class extends (_c2 = Entity, _accept_dec = [reactive], _type_dec2 = [reactive], _collisionDetector_dec = [reactive], _collisionPriority_dec = [reactive], _shape_dec = [reactive], _isDropTarget_dec = [derived], _c2) {
-  constructor(_a, manager) {
-    var _b = _a, { accept, collisionDetector, collisionPriority, type } = _b, input = __objRest2(_b, ["accept", "collisionDetector", "collisionPriority", "type"]);
-    super(input, manager);
-    __runInitializers2(_init4, 5, this);
-    __privateAdd3(this, _accept, __runInitializers2(_init4, 8, this)), __runInitializers2(_init4, 11, this);
-    __privateAdd3(this, _type2, __runInitializers2(_init4, 12, this)), __runInitializers2(_init4, 15, this);
-    __privateAdd3(this, _collisionDetector, __runInitializers2(_init4, 16, this)), __runInitializers2(_init4, 19, this);
-    __privateAdd3(this, _collisionPriority, __runInitializers2(_init4, 20, this)), __runInitializers2(_init4, 23, this);
-    __privateAdd3(this, _shape, __runInitializers2(_init4, 24, this)), __runInitializers2(_init4, 27, this);
-    this.accept = accept;
-    this.collisionDetector = collisionDetector;
-    this.collisionPriority = collisionPriority;
-    this.type = type;
-  }
-  /**
-   * Checks whether or not the droppable accepts a given draggable.
-   *
-   * @param {Draggable} draggable
-   * @returns {boolean}
-   */
-  accepts(draggable) {
-    const { accept } = this;
-    if (!accept) {
-      return true;
-    }
-    if (typeof accept === "function") {
-      return accept(draggable);
-    }
-    if (!draggable.type) {
-      return false;
-    }
-    if (Array.isArray(accept)) {
-      return accept.includes(draggable.type);
-    }
-    return draggable.type === accept;
-  }
-  get isDropTarget() {
-    var _a, _b;
-    return ((_b = (_a = this.manager) == null ? void 0 : _a.dragOperation.target) == null ? void 0 : _b.id) === this.id;
-  }
-};
-_init4 = __decoratorStart2(_c2);
-_accept = /* @__PURE__ */ new WeakMap();
-_type2 = /* @__PURE__ */ new WeakMap();
-_collisionDetector = /* @__PURE__ */ new WeakMap();
-_collisionPriority = /* @__PURE__ */ new WeakMap();
-_shape = /* @__PURE__ */ new WeakMap();
-__decorateElement2(_init4, 4, "accept", _accept_dec, Droppable2, _accept);
-__decorateElement2(_init4, 4, "type", _type_dec2, Droppable2, _type2);
-__decorateElement2(_init4, 4, "collisionDetector", _collisionDetector_dec, Droppable2, _collisionDetector);
-__decorateElement2(_init4, 4, "collisionPriority", _collisionPriority_dec, Droppable2, _collisionPriority);
-__decorateElement2(_init4, 4, "shape", _shape_dec, Droppable2, _shape);
-__decorateElement2(_init4, 2, "isDropTarget", _isDropTarget_dec, Droppable2);
-__decoratorMetadata2(_init4, Droppable2);
-var Sensor = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
-    this.manager = manager;
-    this.options = options;
-  }
-};
+import {
+  CollisionPriority as CollisionPriority7,
+  CollisionType as CollisionType7
+} from "@dnd-kit/abstract";
 
 // components/DraggableComponent/collision/directional/index.ts
 init_react_import();
+import { CollisionType } from "@dnd-kit/abstract";
 
 // components/DraggableComponent/collision/collision-debug.ts
 init_react_import();
 var DEBUG = false;
 var debugElements = {};
 var timeout;
-var collisionDebug = (a2, b2, id, color, label) => {
+var collisionDebug = (a, b, id, color, label) => {
   if (!DEBUG) return;
   const debugId = `${id}-debug`;
   clearTimeout(timeout);
@@ -3313,13 +2370,13 @@ var collisionDebug = (a2, b2, id, color, label) => {
       document.body.appendChild(svg);
       debugElements[debugId] = { svg, line, text };
     }
-    line.setAttribute("x1", a2.x.toString());
-    line.setAttribute("x2", b2.x.toString());
-    line.setAttribute("y1", a2.y.toString());
-    line.setAttribute("y2", b2.y.toString());
+    line.setAttribute("x1", a.x.toString());
+    line.setAttribute("x2", b.x.toString());
+    line.setAttribute("y1", a.y.toString());
+    line.setAttribute("y2", b.y.toString());
     line.setAttribute("style", `stroke:${color};stroke-width:2`);
-    text.setAttribute("x", (a2.x - (a2.x - b2.x) / 2).toString());
-    text.setAttribute("y", (a2.y - (a2.y - b2.y) / 2).toString());
+    text.setAttribute("x", (a.x - (a.x - b.x) / 2).toString());
+    text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
     if (label) {
       text.innerHTML = label;
     }
@@ -3395,6 +2452,7 @@ var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0)
 
 // components/DraggableComponent/collision/dynamic/track-movement-interval.ts
 init_react_import();
+import { Point } from "@dnd-kit/geometry";
 var INTERVAL_SENSITIVITY = 10;
 var intervalCache = {
   current: { x: 0, y: 0 },
@@ -3417,6 +2475,18 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
 
 // ../../node_modules/@dnd-kit/collision/dist/index.js
 init_react_import();
+import { CollisionPriority, CollisionType as CollisionType2 } from "@dnd-kit/abstract";
+import { Point as Point2 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
+import { Point as Point22 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
+import { Point as Point3 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
+import { Point as Point4 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
+import { Point as Point5 } from "@dnd-kit/geometry";
+import { CollisionPriority as CollisionPriority6, CollisionType as CollisionType6 } from "@dnd-kit/abstract";
+import { Point as Point6 } from "@dnd-kit/geometry";
 var pointerIntersection = ({
   dragOperation,
   droppable
@@ -3430,11 +2500,11 @@ var pointerIntersection = ({
     return null;
   }
   if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = Point.distance(droppable.shape.center, pointerCoordinates);
+    const distance = Point2.distance(droppable.shape.center, pointerCoordinates);
     return {
       id,
       value: 1 / distance,
-      type: CollisionType.PointerIntersection,
+      type: CollisionType2.PointerIntersection,
       priority: CollisionPriority.High
     };
   }
@@ -3468,8 +2538,8 @@ var closestCorners = (input) => {
   const distance = corners.reduce(
     (acc, corner) => {
       var _a;
-      return acc + Point.distance(
-        Point.from(corner),
+      return acc + Point3.distance(
+        Point3.from(corner),
         (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
       );
     },
@@ -3479,15 +2549,15 @@ var closestCorners = (input) => {
   return {
     id: droppable.id,
     value: 1 / value,
-    type: CollisionType.Collision,
-    priority: CollisionPriority.Normal
+    type: CollisionType3.Collision,
+    priority: CollisionPriority3.Normal
   };
 };
 
 // components/DraggableComponent/collision/dynamic/index.ts
 var flushNext = "";
 var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
-  var _a, _b, _c3, _d, _e;
+  var _a, _b, _c, _d, _e;
   const { dragOperation, droppable } = input;
   const { position } = dragOperation;
   const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
@@ -3517,7 +2587,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: CollisionPriority.Highest
+        priority: CollisionPriority7.Highest
       });
     }
   }
@@ -3534,14 +2604,14 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
     const collision = {
       id: droppable.id,
       value: intersectionRatio,
-      priority: CollisionPriority.High,
-      type: CollisionType.Collision
+      priority: CollisionPriority7.High,
+      type: CollisionType7.Collision
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
     return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
   }
-  if (((_c3 = dragOperation.source) == null ? void 0 : _c3.id) !== droppable.id) {
+  if (((_c = dragOperation.source) == null ? void 0 : _c.id) !== droppable.id) {
     const xAxisIntersection = dropShape.boundingRectangle.right > dragShape.boundingRectangle.left && dropShape.boundingRectangle.left < dragShape.boundingRectangle.right;
     const yAxisIntersection = dropShape.boundingRectangle.bottom > dragShape.boundingRectangle.top && dropShape.boundingRectangle.top < dragShape.boundingRectangle.bottom;
     if (dragAxis === "y" && xAxisIntersection || yAxisIntersection) {
@@ -3564,7 +2634,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: CollisionPriority.Low
+            priority: CollisionPriority7.Low
           });
         }
         collisionDebug(
@@ -3574,7 +2644,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
           "orange",
           direction || ""
         );
-        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: CollisionPriority.Lowest });
+        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: CollisionPriority7.Lowest });
       }
     }
   }
@@ -3612,6 +2682,25 @@ function useSortableSafe(input) {
   return useSortable(input);
 }
 
+// lib/get-deep-scroll-position.ts
+init_react_import();
+function getDeepScrollPosition(element) {
+  let totalScroll = {
+    x: 0,
+    y: 0
+  };
+  let current = element;
+  while (current && current !== document.documentElement) {
+    const parent = current.parentElement;
+    if (parent) {
+      totalScroll.x += parent.scrollLeft;
+      totalScroll.y += parent.scrollTop;
+    }
+    current = parent;
+  }
+  return totalScroll;
+}
+
 // components/DraggableComponent/index.tsx
 import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("DraggableComponent", styles_module_default11);
@@ -3622,8 +2711,23 @@ var actionsTop = -(actionsOverlayTop - 8);
 var actionsSide = space;
 var DefaultActionBar = ({
   label,
-  children
-}) => /* @__PURE__ */ jsx21(ActionBar, { label, children: /* @__PURE__ */ jsx21(ActionBar.Group, { children }) });
+  children,
+  parentAction
+}) => /* @__PURE__ */ jsxs10(ActionBar, { children: [
+  /* @__PURE__ */ jsxs10(ActionBar.Group, { children: [
+    parentAction,
+    label && /* @__PURE__ */ jsx21(ActionBar.Label, { label })
+  ] }),
+  /* @__PURE__ */ jsx21(ActionBar.Group, { children })
+] });
+var convertIdToSelector = (id, zoneCompound, data) => {
+  const content = zoneCompound && data.zones && zoneCompound !== "default-zone" ? data.zones[zoneCompound] : data.content;
+  const index = content.findIndex((item) => item.props.id === id);
+  return {
+    zone: zoneCompound || "",
+    index
+  };
+};
 var DraggableComponent = ({
   children,
   depth,
@@ -3685,6 +2789,7 @@ var DraggableComponent = ({
     group: zoneCompound,
     type: "component",
     data: {
+      areaId: ctx == null ? void 0 : ctx.areaId,
       zone: zoneCompound,
       index,
       componentType,
@@ -3715,22 +2820,22 @@ var DraggableComponent = ({
   );
   const [portalEl, setPortalEl] = useState12();
   useEffect11(() => {
-    var _a, _b;
+    var _a, _b, _c;
     setPortalEl(
-      (_b = iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : document.getElementById("puck-preview")) != null ? _b : document.body
+      iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-puck-preview]")) != null ? _c : document.body
     );
-  }, [iframe.enabled]);
+  }, [iframe.enabled, ref.current]);
   const getStyle = useCallback6(() => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
-    const doc = ref.current.ownerDocument;
-    const view = doc.defaultView;
-    const portalContainerEl = iframe.enabled ? null : document.getElementById("puck-preview");
+    const deepScrollPosition = getDeepScrollPosition(ref.current);
+    const portalContainerEl = iframe.enabled ? null : (_a = ref.current) == null ? void 0 : _a.closest("[data-puck-preview]");
     const portalContainerRect = portalContainerEl == null ? void 0 : portalContainerEl.getBoundingClientRect();
+    const portalScroll = portalContainerEl ? getDeepScrollPosition(portalContainerEl) : { x: 0, y: 0 };
     const scroll = {
-      x: ((view == null ? void 0 : view.scrollX) || 0) - ((_a = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _a : 0),
-      y: ((view == null ? void 0 : view.scrollY) || 0) - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _b : 0)
+      x: deepScrollPosition.x - portalScroll.x - ((_b = portalContainerRect == null ? void 0 : portalContainerRect.left) != null ? _b : 0),
+      y: deepScrollPosition.y - portalScroll.y - ((_c = portalContainerRect == null ? void 0 : portalContainerRect.top) != null ? _c : 0)
     };
     const style2 = {
       left: `${rect.left + scroll.x}px`,
@@ -3739,11 +2844,20 @@ var DraggableComponent = ({
       width: `${rect.width}px`
     };
     return style2;
-  }, [ref, iframe]);
+  }, [ref.current]);
   const [style, setStyle] = useState12();
   const sync = useCallback6(() => {
     setStyle(getStyle());
-  }, [ref, iframe]);
+  }, [ref.current, iframe]);
+  useEffect11(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver(sync);
+      observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref.current]);
   useEffect11(() => {
     ctx == null ? void 0 : ctx.registerPath({
       index,
@@ -3758,8 +2872,8 @@ var DraggableComponent = ({
     item: selectedItem
   });
   const onClick = useCallback6(
-    (e2) => {
-      e2.stopPropagation();
+    (e) => {
+      e.stopPropagation();
       dispatch({
         type: "setUi",
         ui: {
@@ -3769,28 +2883,38 @@ var DraggableComponent = ({
     },
     [index, zoneCompound, id]
   );
-  const onDuplicate = useCallback6(
-    (e2) => {
-      e2.stopPropagation();
-      dispatch({
-        type: "duplicate",
-        sourceIndex: index,
-        sourceZone: zoneCompound
-      });
-    },
-    [index, zoneCompound]
-  );
-  const onDelete = useCallback6(
-    (e2) => {
-      e2.stopPropagation();
-      dispatch({
-        type: "remove",
-        index,
-        zone: zoneCompound
-      });
-    },
-    [index, zoneCompound]
-  );
+  const onSelectParent = useCallback6(() => {
+    if (!(ctx == null ? void 0 : ctx.areaId)) {
+      return;
+    }
+    const parentAreaId = ctx.areaId;
+    const parentZone = path[path.length - 3];
+    const parentItemSelector = convertIdToSelector(
+      parentAreaId,
+      parentZone,
+      state.data
+    );
+    dispatch({
+      type: "setUi",
+      ui: {
+        itemSelector: parentItemSelector
+      }
+    });
+  }, [ctx, path]);
+  const onDuplicate = useCallback6(() => {
+    dispatch({
+      type: "duplicate",
+      sourceIndex: index,
+      sourceZone: zoneCompound
+    });
+  }, [index, zoneCompound]);
+  const onDelete = useCallback6(() => {
+    dispatch({
+      type: "remove",
+      index,
+      zone: zoneCompound
+    });
+  }, [index, zoneCompound]);
   const [hover, setHover] = useState12(false);
   const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
   useEffect11(() => {
@@ -3798,7 +2922,7 @@ var DraggableComponent = ({
       return;
     }
     const el = ref.current;
-    const _onMouseOver = (e2) => {
+    const _onMouseOver = (e) => {
       if (userIsDragging) {
         if (thisIsDragging) {
           setHover(true);
@@ -3808,10 +2932,10 @@ var DraggableComponent = ({
       } else {
         setHover(true);
       }
-      e2.stopPropagation();
+      e.stopPropagation();
     };
-    const _onMouseOut = (e2) => {
-      e2.stopPropagation();
+    const _onMouseOut = (e) => {
+      e.stopPropagation();
       setHover(false);
     };
     el.setAttribute("data-puck-component", id);
@@ -3893,6 +3017,7 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
+  const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx21(CornerLeftUp, { size: 16 }) });
   return /* @__PURE__ */ jsxs10(
     DropZoneProvider,
     {
@@ -3938,10 +3063,17 @@ var DraggableComponent = ({
                           paddingRight: actionsSide
                         },
                         ref: syncActionsPosition,
-                        children: /* @__PURE__ */ jsxs10(CustomActionBar, { label: DEBUG2 ? id : label, children: [
-                          permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
-                        ] })
+                        children: /* @__PURE__ */ jsxs10(
+                          CustomActionBar,
+                          {
+                            parentAction,
+                            label: DEBUG2 ? id : label,
+                            children: [
+                              permissions.duplicate && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx21(Copy, { size: 16 }) }),
+                              permissions.delete && /* @__PURE__ */ jsx21(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx21(Trash, { size: 16 }) })
+                            ]
+                          }
+                        )
                       }
                     )
                   }
@@ -4216,12 +3348,12 @@ function DropZoneEdit({
         "--min-empty-height": `${minEmptyHeight}px`
       }),
       children: [
-        isRootZone && DEBUG3 && /* @__PURE__ */ jsxs11(Fragment10, { children: [
+        isRootZone && DEBUG3 && /* @__PURE__ */ jsxs11("div", { "data-puck-component": true, children: [
           /* @__PURE__ */ jsx23("p", { children: deepestZone || rootDroppableId }),
           /* @__PURE__ */ jsx23("p", { children: deepestArea || "No area" })
         ] }),
-        contentWithPreview.map((item, i2) => {
-          var _a, _b, _c3, _d, _e;
+        contentWithPreview.map((item, i) => {
+          var _a, _b, _c, _d, _e;
           const componentId = item.props.id;
           const puckProps = {
             renderDropZone: DropZone,
@@ -4247,7 +3379,7 @@ function DropZoneEdit({
             };
             var Preview2 = Preview3;
             componentType = preview.componentType;
-            label = (_d = (_c3 = config.components[componentType]) == null ? void 0 : _c3.label) != null ? _d : preview.componentType;
+            label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : preview.componentType;
             Render2 = Preview3;
           }
           return /* @__PURE__ */ jsx23(
@@ -4261,7 +3393,7 @@ function DropZoneEdit({
                   componentType,
                   zoneCompound,
                   depth: depth + 1,
-                  index: i2,
+                  index: i,
                   isLoading: ((_e = appContext2.componentState[componentId]) == null ? void 0 : _e.loadingCount) > 0,
                   isSelected,
                   label,
@@ -4347,6 +3479,8 @@ var getZoneId = (zoneCompound) => {
 
 // components/DragDropContext/NestedDroppablePlugin.ts
 init_react_import();
+import { Plugin } from "@dnd-kit/abstract";
+import { effects } from "@dnd-kit/state";
 
 // lib/throttle.ts
 init_react_import();
@@ -4381,9 +3515,9 @@ function isPositionInsideRect(position, rect) {
 var BUFFER_ZONE = 8;
 var REFRESH_ON_MOVE = true;
 var depthSort = (candidates) => {
-  return candidates.sort((a2, b2) => {
-    const aData = a2.data;
-    const bData = b2.data;
+  return candidates.sort((a, b) => {
+    const aData = a.data;
+    const bData = b.data;
     if (aData.depth > bData.depth) {
       return 1;
     }
@@ -4408,24 +3542,6 @@ var getZoneId2 = (candidate) => {
   }
   return id;
 };
-var getAreaId = (candidate) => {
-  if (candidate.type === "component") {
-    const data = candidate.data;
-    if (data.containsActiveZone) {
-      return candidate.id;
-    }
-  }
-  return null;
-};
-var getDeepestId = (candidates, idFn) => {
-  let id = null;
-  for (let i2 = 0; i2 < candidates.length; i2++) {
-    const candidate = candidates[i2];
-    id = idFn(candidate);
-    if (id) break;
-  }
-  return id;
-};
 var expandHitBox = (rect) => {
   return {
     bottom: rect.bottom + BUFFER_ZONE,
@@ -4484,12 +3600,17 @@ var findDeepestCandidate = (position, manager) => {
         if (candidateData2.areaId === draggedCandidateId) {
           return false;
         }
+      } else if (candidate.type === "component") {
+        const candidateData2 = candidate.data;
+        if (!candidateData2.inDroppableZone) {
+          return false;
+        }
       }
       return true;
     });
     filteredCandidates.reverse();
     const zone = getZoneId2(filteredCandidates[0]);
-    const area = getDeepestId(filteredCandidates, getAreaId);
+    const area = filteredCandidates[0].data.areaId || null;
     return { zone, area };
   }
   return {
@@ -4614,7 +3735,7 @@ function duplicateRelatedZones(item, data, newId) {
       (dupeOfDupes2, item2, index) => __spreadValues(__spreadValues({}, dupeOfDupes2), duplicateRelatedZones(zone[index], data, item2.props.id).zones),
       acc
     );
-    const [_2, zoneId] = getZoneId(key);
+    const [_, zoneId] = getZoneId(key);
     return __spreadProps(__spreadValues({}, dupeOfDupes), {
       [key]: zone,
       [`${newId}:${zoneId}`]: dupedZone
@@ -4934,6 +4055,11 @@ import { isElement as isElement2 } from "@dnd-kit/dom/utilities";
 
 // components/DragDropContext/PointerSensor.ts
 init_react_import();
+import { batch, effect } from "@dnd-kit/state";
+import { Sensor, configurator } from "@dnd-kit/abstract";
+import {
+  exceedsDistance
+} from "@dnd-kit/geometry";
 import {
   getDocument,
   isElement,
@@ -4955,7 +4081,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     this.handleCancel = this.handleCancel.bind(this);
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    E(() => {
+    effect(() => {
       const unbindGlobal = this.bindGlobal(options != null ? options : {});
       return () => {
         unbindGlobal();
@@ -4963,7 +4089,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     });
   }
   bind(source, options = this.options) {
-    const unbind = E(() => {
+    const unbind = effect(() => {
       var _a;
       const target = (_a = source.handle) != null ? _a : source.element;
       const listener = (event) => {
@@ -5126,7 +4252,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
       return;
     }
     event.preventDefault();
-    o(() => {
+    batch(() => {
       manager.actions.setDragSource(source.id);
       manager.actions.start({ coordinates: initialCoordinates, event });
     });
@@ -5214,7 +4340,10 @@ function useDragListener(type, fn, deps = []) {
 }
 var previewContext = createContext3(null);
 var AREA_CHANGE_DEBOUNCE_MS = 100;
-var DragDropContextClient = ({ children }) => {
+var DragDropContextClient = ({
+  children,
+  disableAutoScroll
+}) => {
   const { state, config, dispatch, resolveData } = useAppContext();
   const [preview, setPreview] = useState15(null);
   const previewRef = useRef5(null);
@@ -5222,45 +4351,63 @@ var DragDropContextClient = ({ children }) => {
   const [deepest, setDeepest] = useState15(null);
   const [nextDeepest, setNextDeepest] = useState15(null);
   const deepestRef = useRef5(deepest);
-  const dbDeepestRef = useRef5(deepest);
-  const setDeepestDb = useDebouncedCallback2((params) => {
-    setDeepest(params);
-    dbDeepestRef.current = params;
-  }, AREA_CHANGE_DEBOUNCE_MS);
-  const setDeepestDbMaybe = useCallback9(
-    (params) => {
-      var _a, _b;
-      if (deepestRef.current === null || ((_a = deepestRef.current) == null ? void 0 : _a.zone) === "void" || params.zone && params.area && ((_b = dbDeepestRef.current) == null ? void 0 : _b.area) === params.area) {
-        setDeepest(params);
-      } else {
-        setDeepestDb(params);
-      }
-      if (!dbDeepestRef.current) {
-        dbDeepestRef.current = params;
-      }
+  const debouncedParamsRef = useRef5(null);
+  const setDeepestAndCollide = useCallback9(
+    (params, manager) => {
+      setDeepest(params);
+      setTimeout(() => {
+        manager.collisionObserver.forceUpdate(true);
+      }, 50);
+      debouncedParamsRef.current = null;
     },
-    [deepest]
+    []
+  );
+  const setDeepestDb = useDebouncedCallback2(
+    setDeepestAndCollide,
+    AREA_CHANGE_DEBOUNCE_MS
   );
+  useEffect13(() => {
+    deepestRef.current = deepest;
+  }, [deepest]);
+  const cancelDb = () => {
+    setDeepestDb.cancel();
+    debouncedParamsRef.current = null;
+  };
   const [plugins] = useState15(() => [
-    ...defaultPreset.plugins,
+    ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin({
       onChange: (params, manager) => {
-        var _a, _b, _c3;
-        const paramsChanged = !deepestRef.current || params.area !== ((_a = deepestRef.current) == null ? void 0 : _a.area) || params.zone !== ((_b = deepestRef.current) == null ? void 0 : _b.zone);
-        if (paramsChanged) {
-          if (manager.dragOperation.status.dragging) {
-            setDeepestDbMaybe(params);
+        const lastParams = deepestRef.current;
+        const areaChanged = params.area !== (lastParams == null ? void 0 : lastParams.area);
+        const zoneChanged = params.zone !== (lastParams == null ? void 0 : lastParams.zone);
+        const isDragging = manager.dragOperation.status.dragging;
+        if (areaChanged || zoneChanged) {
+          setNextDeepest(params);
+        }
+        if (params.zone !== "void" && (lastParams == null ? void 0 : lastParams.zone) === "void") {
+          setDeepest(params);
+          manager.collisionObserver.forceUpdate(true);
+          return;
+        }
+        if (areaChanged) {
+          if (isDragging) {
+            const debouncedParams = debouncedParamsRef.current;
+            const isSameParams = debouncedParams && debouncedParams.area === params.area && debouncedParams.zone === params.zone;
+            if (!isSameParams) {
+              cancelDb();
+              setDeepestDb(params, manager);
+              debouncedParamsRef.current = params;
+            }
           } else {
-            setDeepest(params);
+            cancelDb();
+            setDeepestAndCollide(params, manager);
           }
-          setNextDeepest(params);
+          return;
         }
-        if (params.area !== ((_c3 = deepestRef.current) == null ? void 0 : _c3.area)) {
-          setTimeout(() => {
-            manager.collisionObserver.forceUpdate(true);
-          }, 50);
+        if (zoneChanged) {
+          setDeepestAndCollide(params, manager);
         }
-        deepestRef.current = params;
+        cancelDb();
       }
     })
   ]);
@@ -5330,24 +4477,25 @@ var DragDropContextClient = ({ children }) => {
               return;
             }
             const { zone, index } = source.data;
+            const thisPreview = previewRef.current ? __spreadValues({}, previewRef.current) : null;
+            previewRef.current = null;
             setTimeout(() => {
               var _a, _b;
               setDraggedItem(null);
               if (event.canceled || (target == null ? void 0 : target.type) === "void") {
                 setPreview(null);
-                previewRef.current = null;
                 (_a = dragListeners.dragend) == null ? void 0 : _a.forEach((fn) => {
                   fn(event, manager);
                 });
                 return;
               }
-              if (previewRef.current) {
+              if (thisPreview) {
                 setPreview(null);
-                if (previewRef.current.type === "insert") {
+                if (thisPreview.type === "insert") {
                   insertComponent(
-                    previewRef.current.componentType,
-                    previewRef.current.zone,
-                    previewRef.current.index,
+                    thisPreview.componentType,
+                    thisPreview.zone,
+                    thisPreview.index,
                     { config, dispatch, resolveData, state }
                   );
                 } else if (initialSelector.current) {
@@ -5355,12 +4503,11 @@ var DragDropContextClient = ({ children }) => {
                     type: "move",
                     sourceIndex: initialSelector.current.index,
                     sourceZone: initialSelector.current.zone,
-                    destinationIndex: previewRef.current.index,
-                    destinationZone: previewRef.current.zone,
+                    destinationIndex: thisPreview.index,
+                    destinationZone: thisPreview.zone,
                     recordHistory: false
                   });
                 }
-                previewRef.current = null;
               }
               dispatch({
                 type: "setUi",
@@ -5376,9 +4523,10 @@ var DragDropContextClient = ({ children }) => {
             }, 300);
           },
           onDragOver: (event, manager) => {
-            var _a, _b, _c3, _d;
+            var _a, _b, _c, _d;
             event.preventDefault();
             if (!draggedItem) return;
+            cancelDb();
             const { source, target } = event.operation;
             if (!target || !source || target.type === "void") return;
             const [sourceId] = source.id.split(":");
@@ -5404,7 +4552,7 @@ var DragDropContextClient = ({ children }) => {
               targetZone = target.id.toString();
               targetIndex = 0;
             }
-            if (targetId === sourceId || ((_c3 = pathData == null ? void 0 : pathData[target.id]) == null ? void 0 : _c3.path.find((path) => {
+            if (targetId === sourceId || ((_c = pathData == null ? void 0 : pathData[target.id]) == null ? void 0 : _c.path.find((path) => {
               const [pathId] = path.split(":");
               return pathId === sourceId;
             }))) {
@@ -5494,12 +4642,15 @@ var DragDropContextClient = ({ children }) => {
     }
   );
 };
-var DragDropContext2 = ({ children }) => {
+var DragDropContext2 = ({
+  children,
+  disableAutoScroll
+}) => {
   const { status } = useAppContext();
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx24(DragDropContextClient, { children });
+  return /* @__PURE__ */ jsx24(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
@@ -5522,7 +4673,7 @@ var DrawerItemInner = ({
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
       ref: dragRef,
-      onMouseDown: (e2) => e2.preventDefault(),
+      onMouseDown: (e) => e.preventDefault(),
       children: /* @__PURE__ */ jsx25(CustomInner, { name, children: /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs12("div", { className: getClassNameItem2("draggable"), children: [
         /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("name"), children: label != null ? label : name }),
         /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ jsx25(DragIcon, {}) })
@@ -5716,7 +4867,7 @@ var SidebarSection = ({
       style: { background },
       children: [
         /* @__PURE__ */ jsx26("div", { className: getClassName19("title"), children: /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumbs"), children: [
-          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i2) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
+          showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName19("breadcrumb"), children: [
             /* @__PURE__ */ jsx26(
               "button",
               {
@@ -5727,7 +4878,7 @@ var SidebarSection = ({
               }
             ),
             /* @__PURE__ */ jsx26(ChevronRight, { size: 16 })
-          ] }, i2)) : null,
+          ] }, i)) : null,
           /* @__PURE__ */ jsx26("div", { className: getClassName19("heading"), children: /* @__PURE__ */ jsx26(Heading, { rank: "2", size: "xs", children: title }) })
         ] }) }),
         /* @__PURE__ */ jsx26("div", { className: getClassName19("content"), children }),
@@ -5937,8 +5088,8 @@ var Fields = () => {
     "form",
     {
       className: getClassName21(),
-      onSubmit: (e2) => {
-        e2.preventDefault();
+      onSubmit: (e) => {
+        e.preventDefault();
       },
       children: [
         /* @__PURE__ */ jsx28(Wrapper, { isLoading, itemSelector, children: Object.keys(fields).map((fieldName) => {
@@ -6122,7 +5273,7 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 var useComponentList = (config, ui) => {
   const [componentList, setComponentList] = useState18();
   useEffect15(() => {
-    var _a, _b, _c3;
+    var _a, _b, _c;
     if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents = [];
       let _componentList;
@@ -6136,7 +5287,7 @@ var useComponentList = (config, ui) => {
             {
               id: categoryKey,
               title: category.title || categoryKey,
-              children: category.components.map((componentName, i2) => {
+              children: category.components.map((componentName, i) => {
                 var _a2;
                 matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
@@ -6145,7 +5296,7 @@ var useComponentList = (config, ui) => {
                   {
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
                     name: componentName,
-                    index: i2
+                    index: i
                   },
                   componentName
                 );
@@ -6164,8 +5315,8 @@ var useComponentList = (config, ui) => {
             ComponentList,
             {
               id: "other",
-              title: ((_c3 = ui.componentList.other) == null ? void 0 : _c3.title) || "Other",
-              children: remainingComponents.map((componentName, i2) => {
+              title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
+              children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
                 return /* @__PURE__ */ jsx30(
@@ -6173,7 +5324,7 @@ var useComponentList = (config, ui) => {
                   {
                     name: componentName,
                     label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
-                    index: i2
+                    index: i
                   },
                   componentName
                 );
@@ -6232,7 +5383,7 @@ var getStyles = (styleSheet) => {
   if (styleSheet) {
     try {
       return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
-    } catch (e2) {
+    } catch (e) {
       console.warn(
         "Access to stylesheet %s is denied. Ignoring\u2026",
         styleSheet.href
@@ -6369,7 +5520,7 @@ var CopyHostStyles = ({
     const parentBody = parentDocument.getElementsByTagName("body")[0];
     syncAttributes(parentBody, doc.body);
     Promise.all(
-      collectedStyles.map((styleNode, i2) => __async(void 0, null, function* () {
+      collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
         if (styleNode.nodeName === "LINK") {
           const linkHref = styleNode.href;
           if (hrefs.indexOf(linkHref) > -1) {
@@ -6527,6 +5678,7 @@ var Preview = ({ id = "puck-preview" }) => {
     {
       className: getClassName23(),
       id,
+      "data-puck-preview": true,
       onClick: () => {
         dispatch({ type: "setUi", ui: __spreadProps(__spreadValues({}, state.ui), { itemSelector: null }) });
       },
@@ -6680,9 +5832,9 @@ var LayerTree = ({
     ] }),
     /* @__PURE__ */ jsxs17("ul", { className: getClassName24(), children: [
       zoneContent.length === 0 && /* @__PURE__ */ jsx34("div", { className: getClassName24("helper"), children: "No items" }),
-      zoneContent.map((item, i2) => {
+      zoneContent.map((item, i) => {
         var _a;
-        const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i2 && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
+        const isSelected = (itemSelector == null ? void 0 : itemSelector.index) === i && (itemSelector.zone === zone || itemSelector.zone === rootDroppableId && !zone);
         const zonesForItem = findZonesForArea(data, item.props.id);
         const containsZone = Object.keys(zonesForItem).length > 0;
         const { setHoveringComponent = () => {
@@ -6712,7 +5864,7 @@ var LayerTree = ({
                       setItemSelector(null);
                       return;
                     }
-                    const id = zoneContent[i2].props.id;
+                    const id = zoneContent[i].props.id;
                     const frame = getFrame();
                     const el = frame == null ? void 0 : frame.querySelector(
                       `[data-puck-component="${id}"]`
@@ -6727,17 +5879,17 @@ var LayerTree = ({
                     scrollIntoView(el);
                     onScrollEnd(frame, () => {
                       setItemSelector({
-                        index: i2,
+                        index: i,
                         zone
                       });
                     });
                   },
-                  onMouseOver: (e2) => {
-                    e2.stopPropagation();
+                  onMouseOver: (e) => {
+                    e.stopPropagation();
                     setHoveringComponent(item.props.id);
                   },
-                  onMouseOut: (e2) => {
-                    e2.stopPropagation();
+                  onMouseOut: (e) => {
+                    e.stopPropagation();
                     setHoveringComponent(null);
                   },
                   children: [
@@ -6770,7 +5922,7 @@ var LayerTree = ({
               ) }, idx))
             ]
           },
-          `${item.props.id}_${i2}`
+          `${item.props.id}_${i}`
         );
       })
     ] })
@@ -7121,8 +6273,8 @@ var ViewportButton = ({
     {
       title,
       disabled: isActive,
-      onClick: (e2) => {
-        e2.stopPropagation();
+      onClick: (e) => {
+        e.stopPropagation();
         onClick({ width, height });
       },
       children: /* @__PURE__ */ jsx36("span", { className: getClassNameButton("inner"), children })
@@ -7158,11 +6310,11 @@ var ViewportControls = ({
           label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
         }
       ]
-    ].filter((a2) => a2.value <= autoZoom).sort((a2, b2) => a2.value > b2.value ? 1 : -1),
+    ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
     [autoZoom]
   );
   return /* @__PURE__ */ jsxs19("div", { className: getClassName25(), children: [
-    viewports.map((viewport, i2) => /* @__PURE__ */ jsx36(
+    viewports.map((viewport, i) => /* @__PURE__ */ jsx36(
       ViewportButton,
       {
         height: viewport.height,
@@ -7171,7 +6323,7 @@ var ViewportControls = ({
         onClick: onViewportChange,
         children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
       },
-      i2
+      i
     )),
     /* @__PURE__ */ jsx36("div", { className: getClassName25("divider") }),
     /* @__PURE__ */ jsx36(
@@ -7179,8 +6331,8 @@ var ViewportControls = ({
       {
         title: "Zoom viewport out",
         disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
-        onClick: (e2) => {
-          e2.stopPropagation();
+        onClick: (e) => {
+          e.stopPropagation();
           onZoom(
             zoomOptions[Math.max(
               zoomOptions.findIndex((option) => option.value === zoom) - 1,
@@ -7196,8 +6348,8 @@ var ViewportControls = ({
       {
         title: "Zoom viewport in",
         disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
-        onClick: (e2) => {
-          e2.stopPropagation();
+        onClick: (e) => {
+          e.stopPropagation();
           onZoom(
             zoomOptions[Math.min(
               zoomOptions.findIndex((option) => option.value === zoom) + 1,
@@ -7214,8 +6366,8 @@ var ViewportControls = ({
       {
         className: getClassName25("zoomSelect"),
         value: zoom.toString(),
-        onChange: (e2) => {
-          onZoom(parseFloat(e2.currentTarget.value));
+        onChange: (e) => {
+          onZoom(parseFloat(e.currentTarget.value));
         },
         children: zoomOptions.map((option) => /* @__PURE__ */ jsx36(
           "option",
@@ -7462,45 +6614,7 @@ import { DragDropManager as DragDropManager2, Feedback } from "@dnd-kit/dom";
 // lib/use-inject-css.ts
 init_react_import();
 import { useEffect as useEffect20, useState as useState23 } from "react";
-var styles = `
-/* Prevent user from interacting with underlying component */
-[data-puck-component] * {
-  pointer-events: none;
-  user-select: none;
-    -webkit-user-select: none;
-}
-
-[data-puck-component] {
-  cursor: grab;
-  pointer-events: auto !important;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-[data-puck-disabled] {
-  cursor: pointer;
-}
-
-/* Placeholder */
-[data-puck-dragging]:not([data-dnd-dragging]) {
-  background: var(--puck-color-azure-06) !important;
-  border: none !important;
-  color: #00000000 !important;
-  opacity: 0.3 !important;
-  outline: none !important;
-  transition: none !important;
-}
-
-[data-puck-dragging]:not([data-dnd-dragging]) *, [data-puck-dragging]:not([data-dnd-dragging])::after, [data-puck-dragging]:not([data-dnd-dragging])::before {
-  opacity: 0 !important;
-}
-
-[data-dnd-dragging] {
-  pointer-events: none !important;
-  outline: 2px var(--puck-color-azure-09) solid !important;
-  outline-offset: -2px !important;
-}
-`;
+var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
   const [el, setEl] = useState23();
   useEffect20(() => {
@@ -7555,7 +6669,7 @@ function Puck({
   }, _iframe);
   useInjectGlobalCss(iframe.enabled);
   const [generatedAppState] = useState24(() => {
-    var _a2, _b2, _c3, _d, _e, _f, _g, _h, _i;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (typeof window !== "undefined") {
@@ -7569,13 +6683,13 @@ function Puck({
       const viewportDifferences = Object.entries(viewports).map(([key, value]) => ({
         key,
         diff: Math.abs(viewportWidth - value.width)
-      })).sort((a2, b2) => a2.diff > b2.diff ? 1 : -1);
+      })).sort((a, b) => a.diff > b.diff ? 1 : -1);
       const closestViewport = viewportDifferences[0].key;
       if (iframe.enabled) {
         clientUiState = __spreadProps(__spreadValues({}, clientUiState), {
           viewports: __spreadProps(__spreadValues({}, initial.viewports), {
             current: __spreadProps(__spreadValues({}, initial.viewports.current), {
-              height: ((_b2 = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b2.height) || ((_c3 = viewports[closestViewport]) == null ? void 0 : _c3.height) || "auto",
+              height: ((_b2 = (_a2 = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _a2.current) == null ? void 0 : _b2.height) || ((_c = viewports[closestViewport]) == null ? void 0 : _c.height) || "auto",
               width: ((_e = (_d = initialUi == null ? void 0 : initialUi.viewports) == null ? void 0 : _d.current) == null ? void 0 : _e.width) || ((_f = viewports[closestViewport]) == null ? void 0 : _f.width)
             })
           })
@@ -7761,7 +6875,7 @@ function Puck({
           getPermissions: () => ({}),
           refreshPermissions: () => null
         },
-        children: /* @__PURE__ */ jsx39(DragDropContext2, { children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
+        children: /* @__PURE__ */ jsx39(DragDropContext2, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx39(CustomPuck, { children: children || /* @__PURE__ */ jsx39(
           "div",
           {
             className: getLayoutClassName({
@@ -8051,6 +7165,7 @@ export {
   FieldLabel,
   Group,
   IconButton,
+  Label,
   Puck,
   Render,
   dropZoneContext,
@@ -8125,6 +7240,14 @@ lucide-react/dist/esm/icons/copy.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/corner-left-up.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/globe.js:
   (**
    * @license lucide-react v0.298.0 - ISC