@measured/puck 0.19.0-canary.cc5dc01 → 0.19.0-canary.d9be813b

package/dist/rsc.js

@@ -9,6 +9,9 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -22,6 +25,24 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -43,6 +64,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -64,23 +89,98 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// ../tsup-config/react-import.js
+var import_react;
+var init_react_import = __esm({
+  "../tsup-config/react-import.js"() {
+    "use strict";
+    import_react = __toESM(require("react"));
+  }
+});
+
+// ../../node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/classnames/index.js"(exports2, module2) {
+    "use strict";
+    init_react_import();
+    (function() {
+      "use strict";
+      var hasOwn = {}.hasOwnProperty;
+      function classNames() {
+        var classes = "";
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
+      }
+      if (typeof module2 !== "undefined" && module2.exports) {
+        classNames.default = classNames;
+        module2.exports = classNames;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames;
+        });
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  }
+});
+
 // rsc.tsx
 var rsc_exports = {};
 __export(rsc_exports, {
   Render: () => Render,
-  resolveAllData: () => resolveAllData
+  resolveAllData: () => resolveAllData,
+  transformProps: () => transformProps
 });
 module.exports = __toCommonJS(rsc_exports);
+init_react_import();
 
-// ../tsup-config/react-import.js
-var import_react = __toESM(require("react"));
+// components/ServerRender/index.tsx
+init_react_import();
 
 // lib/root-droppable-id.ts
+init_react_import();
 var rootAreaId = "root";
 var rootZone = "default-zone";
 var rootDroppableId = `${rootAreaId}:${rootZone}`;
 
 // lib/setup-zone.ts
+init_react_import();
 var setupZone = (data, zoneKey) => {
   if (zoneKey === rootDroppableId) {
     return data;
@@ -92,232 +192,3705 @@ var setupZone = (data, zoneKey) => {
   return newData;
 };
 
-// components/ServerRender/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function DropZoneRender({
-  zone,
-  data,
-  areaId = "root",
-  config,
-  metadata = {}
-}) {
-  let zoneCompound = rootDroppableId;
-  let content = (data == null ? void 0 : data.content) || [];
-  if (!data || !config) {
-    return null;
+// lib/use-slots.ts
+init_react_import();
+var import_react2 = require("react");
+function useSlots(config, props, renderSlot) {
+  return (0, import_react2.useMemo)(() => {
+    if (!(config == null ? void 0 : config.fields)) return props;
+    const newProps = __spreadValues({}, props);
+    const fieldKeys = Object.keys(config.fields);
+    for (let i = 0; i < fieldKeys.length; i++) {
+      const fieldKey = fieldKeys[i];
+      const field = config.fields[fieldKey];
+      if ((field == null ? void 0 : field.type) === "slot") {
+        newProps[fieldKey] = (dzProps) => renderSlot(__spreadProps(__spreadValues({}, dzProps), {
+          zone: fieldKey,
+          content: props[fieldKey] || []
+        }));
+      }
+    }
+    return newProps;
+  }, [config, props]);
+}
+
+// components/SlotRender/index.tsx
+init_react_import();
+var import_react26 = require("react");
+
+// components/DropZone/index.tsx
+init_react_import();
+var import_react25 = require("react");
+
+// components/DraggableComponent/index.tsx
+init_react_import();
+var import_react13 = require("react");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "DraggableComponent": "_DraggableComponent_1ukn8_1", "DraggableComponent-overlay": "_DraggableComponent-overlay_1ukn8_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1ukn8_29", "DraggableComponent--hover": "_DraggableComponent--hover_1ukn8_45", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1ukn8_45", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1ukn8_54", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1ukn8_66", "DraggableComponent-actions": "_DraggableComponent-actions_1ukn8_66" };
+
+// lib/get-class-name-factory.ts
+init_react_import();
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
+  if (typeof options === "string") {
+    const descendant = options;
+    const style = styles[`${rootClass}-${descendant}`];
+    if (style) {
+      return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
+    }
+    return "";
+  } else if (typeof options === "object") {
+    const modifiers = options;
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return config.baseClass + (0, import_classnames.default)(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return config.baseClass + styles[rootClass] || "";
   }
-  if (areaId !== rootAreaId && zone !== rootZone) {
-    zoneCompound = `${areaId}:${zone}`;
-    content = setupZone(data, zoneCompound).zones[zoneCompound];
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// ../../node_modules/lucide-react/dist/esm/lucide-react.js
+init_react_import();
+
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+init_react_import();
+var import_react4 = require("react");
+
+// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+init_react_import();
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+init_react_import();
+var import_react3 = require("react");
+
+// ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
+init_react_import();
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode
+    } = _b, rest = __objRest(_b, [
+      "color",
+      "size",
+      "strokeWidth",
+      "absoluteStrokeWidth",
+      "className",
+      "children",
+      "iconNode"
+    ]);
+    return (0, import_react3.createElement)(
+      "svg",
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, defaultAttributes), {
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className)
+      }), rest),
+      [
+        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: content.map((item) => {
-    const Component = config.components[item.type];
-    if (Component) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        Component.render,
-        __spreadProps(__spreadValues({}, item.props), {
-          puck: {
-            renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              DropZoneRender,
-              {
-                zone: zone2,
-                data,
-                areaId: item.props.id,
-                config,
-                metadata
-              }
-            ),
-            metadata
-          }
-        }),
-        item.props.id
-      );
+);
+
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react4.forwardRef)(
+    (_a, ref) => {
+      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+      return (0, import_react4.createElement)(Icon, __spreadValues({
+        ref,
+        iconNode,
+        className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
+      }, props));
     }
-    return null;
-  }) });
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/lucide-react/dist/esm/icons/copy.js
+init_react_import();
+var Copy = createLucideIcon("Copy", [
+  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
+  ["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/trash.js
+init_react_import();
+var Trash = createLucideIcon("Trash", [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }]
+]);
+
+// store/index.ts
+init_react_import();
+
+// reducer/index.ts
+init_react_import();
+
+// reducer/reduce.ts
+init_react_import();
+
+// lib/reorder.ts
+init_react_import();
+var reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+// lib/insert.ts
+init_react_import();
+var insert = (list, index, item) => {
+  const result = Array.from(list || []);
+  result.splice(index, 0, item);
+  return result;
+};
+
+// lib/remove.ts
+init_react_import();
+var remove = (list, index) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
+};
+
+// lib/get-item.ts
+init_react_import();
+function getItem(selector, state) {
+  var _a, _b;
+  const zone = (_a = state.indexes.zones) == null ? void 0 : _a[selector.zone || rootDroppableId];
+  return zone ? (_b = state.indexes.nodes[zone.contentIds[selector.index]]) == null ? void 0 : _b.data : void 0;
 }
-function Render({
-  config,
-  data,
-  metadata
-}) {
+
+// lib/generate-id.ts
+init_react_import();
+var import_uuid = require("uuid");
+var generateId = (type) => type ? `${type}-${(0, import_uuid.v4)()}` : (0, import_uuid.v4)();
+
+// lib/walk-tree.ts
+init_react_import();
+
+// lib/for-each-slot.ts
+init_react_import();
+
+// lib/is-slot.ts
+init_react_import();
+var isSlot = (prop) => {
+  var _a, _b;
+  return Array.isArray(prop) && typeof ((_a = prop[0]) == null ? void 0 : _a.type) === "string" && typeof ((_b = prop[0]) == null ? void 0 : _b.props) === "object";
+};
+
+// lib/for-each-slot.ts
+var forEachSlot = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, cb, recursive = false, isSlot2 = isSlot) {
+  const props = item.props || {};
+  const propKeys = Object.keys(props);
+  for (let i = 0; i < propKeys.length; i++) {
+    const propKey = propKeys[i];
+    const itemType = "type" in item ? item.type : "root";
+    if (isSlot2(itemType, propKey, props[propKey])) {
+      const content = props[propKey];
+      yield cb(props.id, propKey, content);
+      if (recursive) {
+        content.forEach(
+          (childItem) => __async(void 0, null, function* () {
+            return yield forEachSlot(childItem, cb, true, isSlot2);
+          })
+        );
+      }
+    }
+  }
+});
+
+// lib/for-related-zones.ts
+init_react_import();
+
+// lib/get-zone-id.ts
+init_react_import();
+var getZoneId = (zoneCompound) => {
+  if (!zoneCompound) {
+    return [];
+  }
+  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
+    return zoneCompound.split(":");
+  }
+  return [rootDroppableId, zoneCompound];
+};
+
+// lib/for-related-zones.ts
+function forRelatedZones(item, data, cb, path = []) {
+  Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
+    const [parentId] = getZoneId(zoneCompound);
+    if (parentId === item.props.id) {
+      const newPath = [...path, zoneCompound];
+      content.forEach((item2) => forRelatedZones(item2, data, cb, newPath));
+      cb(path, zoneCompound, content);
+    }
+  });
+}
+
+// lib/strip-slots.ts
+init_react_import();
+var stripSlots = (data) => {
+  return __spreadProps(__spreadValues({}, data), {
+    props: Object.entries(data.props).reduce(
+      (acc, [propKey, propVal]) => {
+        if (isSlot(propVal)) {
+          return acc;
+        }
+        return __spreadProps(__spreadValues({}, acc), { [propKey]: propVal });
+      },
+      { id: data.props.id }
+    )
+  });
+};
+
+// lib/walk-tree.ts
+function walkTree(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
   var _a;
-  if ((_a = config.root) == null ? void 0 : _a.render) {
-    const rootProps = data.root.props || data.root;
-    const title = rootProps.title || "";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      config.root.render,
-      __spreadProps(__spreadValues({}, rootProps), {
-        puck: {
-          renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            DropZoneRender,
-            {
-              zone,
-              data,
-              config,
-              metadata
-            }
-          ),
-          isEditing: false,
-          dragRef: null
-        },
-        title,
-        editMode: false,
-        id: "puck-root",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          DropZoneRender,
-          {
-            config,
-            data,
-            zone: rootZone,
-            metadata
-          }
-        )
-      })
+  let newZones = {};
+  const newZoneIndex = {};
+  const newNodeIndex = {};
+  const processContent = (path, zoneCompound, content, zoneType, newId) => {
+    var _a2;
+    const [parentId] = zoneCompound.split(":");
+    const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
+    const [_2, zone] = zoneCompound.split(":");
+    const newZoneCompound = `${newId || parentId}:${zone}`;
+    const newContent2 = mappedContent.map(
+      (zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
     );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    DropZoneRender,
-    {
-      config,
-      data,
-      zone: rootZone,
-      metadata
+    newZoneIndex[newZoneCompound] = {
+      contentIds: newContent2.map((item) => item.props.id),
+      type: zoneType
+    };
+    return [newZoneCompound, newContent2];
+  };
+  const processRelatedZones = (item, newId, initialPath) => {
+    forRelatedZones(
+      item,
+      state.data,
+      (relatedPath, relatedZoneCompound, relatedContent) => {
+        const [zoneCompound, newContent2] = processContent(
+          relatedPath,
+          relatedZoneCompound,
+          relatedContent,
+          "dropzone",
+          newId
+        );
+        newZones[zoneCompound] = newContent2;
+      },
+      initialPath
+    );
+  };
+  const processItem = (item, path, index) => {
+    const mappedItem = mapNodeOrSkip(item, path, index);
+    if (!mappedItem) return item;
+    const id = mappedItem.props.id;
+    processRelatedZones(item, id, path);
+    const newProps = __spreadValues({}, mappedItem.props);
+    forEachSlot(
+      mappedItem,
+      (parentId2, slotId, content) => {
+        const zoneCompound = `${parentId2}:${slotId}`;
+        const [_2, newContent2] = processContent(
+          path,
+          zoneCompound,
+          content,
+          "slot",
+          parentId2
+        );
+        newProps[slotId] = newContent2;
+      },
+      false,
+      (itemType, propName, propValue) => {
+        var _a2, _b;
+        const configForComponent = itemType === "root" ? config == null ? void 0 : config.root : config == null ? void 0 : config.components[itemType];
+        if (!configForComponent) return isSlot(propValue);
+        return ((_b = (_a2 = configForComponent.fields) == null ? void 0 : _a2[propName]) == null ? void 0 : _b.type) === "slot";
+      }
+    );
+    const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
+    const thisZoneCompound = path[path.length - 1];
+    const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
+    newNodeIndex[id] = {
+      data: newItem,
+      flatData: stripSlots(newItem),
+      path,
+      parentId,
+      zone
+    };
+    const finalData = newItem;
+    if (newProps.id === "root") {
+      delete finalData["type"];
+      delete finalData.props["id"];
     }
+    return finalData;
+  };
+  const zones = state.data.zones || {};
+  const [_, newContent] = processContent(
+    [],
+    rootDroppableId,
+    state.data.content,
+    "root"
+  );
+  const processedContent = newContent;
+  Object.keys(zones || {}).forEach((zoneCompound) => {
+    const [parentId] = zoneCompound.split(":");
+    const [_2, newContent2] = processContent(
+      [rootDroppableId],
+      zoneCompound,
+      zones[zoneCompound],
+      "dropzone",
+      parentId
+    );
+    newZones[zoneCompound] = newContent2;
+  }, newZones);
+  const processedRoot = processItem(
+    {
+      type: "root",
+      props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
+    },
+    [],
+    -1
   );
+  const root = __spreadProps(__spreadValues({}, state.data.root), {
+    props: processedRoot.props
+  });
+  return __spreadProps(__spreadValues({}, state), {
+    data: {
+      root,
+      // root: state.data.root, // TODO changing root causes it's entire subtree to re-render. Let's keep this disabled until the performance issues are resolved in #644.
+      content: processedContent,
+      zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
+    },
+    indexes: {
+      nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
+      zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
+    }
+  });
 }
 
-// lib/get-changed.ts
-var getChanged = (newItem, oldItem) => {
-  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
-    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
-    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
-    return __spreadProps(__spreadValues({}, acc), {
-      [item]: oldItemProps[item] !== newItemProps[item]
+// lib/deindex.ts
+init_react_import();
+var deindex = (state, componentData) => {
+  let zones = __spreadValues({}, state.indexes.zones);
+  let nodes = __spreadValues({}, state.indexes.nodes);
+  const dindexRelatedZones = (item) => {
+    forRelatedZones(item, state.data, (_path, zoneCompound, content) => {
+      content.forEach((subItem) => {
+        dindexChildren(subItem);
+        delete nodes[subItem.props.id];
+      });
+      delete zones[zoneCompound];
     });
-  }, {}) : {};
+  };
+  const dindexChildren = (item) => {
+    forEachSlot(
+      item,
+      (parentId, slotId, content) => {
+        const zoneCompound = `${parentId}:${slotId}`;
+        delete zones[zoneCompound];
+        content.forEach((item2) => {
+          dindexRelatedZones(item2);
+          delete nodes[item2.props.id];
+        });
+      },
+      true
+    );
+  };
+  dindexRelatedZones(componentData);
+  dindexChildren(componentData);
+  delete nodes[componentData.props.id];
+  return { nodes, zones };
 };
 
-// lib/resolve-component-data.ts
-var cache = { lastChange: {} };
-var resolveAllComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (content, config, metadata = {}, onResolveStart, onResolveEnd) {
-  return yield Promise.all(
-    content.map((item) => __async(void 0, null, function* () {
-      return yield resolveComponentData(
-        item,
-        config,
-        metadata,
-        onResolveStart,
-        onResolveEnd
-      );
-    }))
+// reducer/reduce.ts
+var zoneCache = {};
+var getIdsForParent = (zoneCompound, state) => {
+  const [parentId] = zoneCompound.split(":");
+  const node = state.indexes.nodes[parentId];
+  return ((node == null ? void 0 : node.path) || []).map((p) => p.split(":")[0]);
+};
+function insertAction(state, action, config) {
+  const id = action.id || generateId(action.componentType);
+  const emptyComponentData = {
+    type: action.componentType,
+    props: __spreadProps(__spreadValues({}, config.components[action.componentType].defaultProps || {}), {
+      id
+    })
+  };
+  const [parentId] = action.destinationZone.split(":");
+  return walkTree(
+    state,
+    config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.destinationZone) {
+        return insert(
+          content || [],
+          action.destinationIndex,
+          emptyComponentData
+        );
+      }
+      return content;
+    },
+    (childItem) => {
+      if (childItem.props.id === id || childItem.props.id === parentId) {
+        return childItem;
+      }
+      return null;
+    }
   );
-});
-var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd) {
-  const configForItem = config.components[item.type];
-  if (configForItem.resolveData) {
-    const { item: oldItem = null, resolved = {} } = cache.lastChange[item.props.id] || {};
-    if (item && item === oldItem) {
-      return resolved;
+}
+var reorderAction = (state, action, appStore) => {
+  return walkTree(
+    state,
+    appStore.config,
+    (content, zoneCompound) => {
+      if (zoneCompound === action.destinationZone) {
+        return reorder(
+          content || [],
+          action.sourceIndex,
+          action.destinationIndex
+        );
+      }
+      return content;
+    },
+    (childItem, path, index) => {
+      const zoneCompound = path[path.length - 1];
+      if (index === action.sourceIndex && zoneCompound === action.destinationZone || index === action.destinationIndex && zoneCompound === action.destinationZone) {
+        return childItem;
+      }
+      return null;
     }
-    const changed = getChanged(item, oldItem);
-    if (onResolveStart) {
-      onResolveStart(item);
+  );
+};
+var replaceAction = (state, action, appStore) => {
+  const [parentId] = action.destinationZone.split(":");
+  const idsInPath = getIdsForParent(action.destinationZone, state);
+  return walkTree(
+    state,
+    appStore.config,
+    (content) => content,
+    (childItem, path) => {
+      const pathIds = path.map((p) => p.split(":")[0]);
+      if (childItem.props.id === action.data.props.id) {
+        return action.data;
+      } else if (childItem.props.id === parentId) {
+        return childItem;
+      } else if (idsInPath.indexOf(childItem.props.id) > -1) {
+        return childItem;
+      } else if (pathIds.indexOf(action.data.props.id) > -1) {
+        return childItem;
+      }
+      return null;
     }
-    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
-      changed,
-      lastData: oldItem,
-      metadata
+  );
+};
+var setAction = (state, action, appStore) => {
+  if (typeof action.state === "object") {
+    const newState = __spreadValues(__spreadValues({}, state), action.state);
+    if (action.state.indexes) {
+      console.warn(
+        "`set` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+      );
+      return newState;
+    }
+    return walkTree(newState, appStore.config);
+  }
+  return __spreadValues(__spreadValues({}, state), action.state(state));
+};
+function reduce(state, action, appStore) {
+  if (action.type === "set") {
+    return setAction(state, action, appStore);
+  }
+  if (action.type === "insert") {
+    return insertAction(state, action, appStore.config);
+  }
+  if (action.type === "replace") {
+    return replaceAction(state, action, appStore);
+  }
+  if (action.type === "replaceRoot") {
+    return walkTree(
+      state,
+      appStore.config,
+      (content) => content,
+      (childItem) => {
+        if (childItem.props.id === "root") {
+          return __spreadProps(__spreadValues({}, childItem), {
+            props: __spreadValues(__spreadValues({}, childItem.props), action.root.props),
+            readOnly: action.root.readOnly
+          });
+        }
+        return childItem;
+      }
+    );
+  }
+  if (action.type === "duplicate") {
+    const item = getItem(
+      { index: action.sourceIndex, zone: action.sourceZone },
+      state
+    );
+    const idsInPath = getIdsForParent(action.sourceZone, state);
+    const newItem = __spreadProps(__spreadValues({}, item), {
+      props: __spreadProps(__spreadValues({}, item.props), {
+        id: generateId(item.type)
+      })
     });
-    const resolvedItem = __spreadProps(__spreadValues({}, item), {
-      props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
+    const modified = walkTree(
+      state,
+      appStore.config,
+      (content, zoneCompound) => {
+        if (zoneCompound === action.sourceZone) {
+          return insert(content, action.sourceIndex + 1, item);
+        }
+        return content;
+      },
+      (childItem, path, index) => {
+        const zoneCompound = path[path.length - 1];
+        const parents = path.map((p) => p.split(":")[0]);
+        if (parents.indexOf(newItem.props.id) > -1) {
+          return __spreadProps(__spreadValues({}, childItem), {
+            props: __spreadProps(__spreadValues({}, childItem.props), {
+              id: generateId(childItem.type)
+            })
+          });
+        }
+        if (zoneCompound === action.sourceZone && index === action.sourceIndex + 1) {
+          return newItem;
+        }
+        const [sourceZoneParent] = action.sourceZone.split(":");
+        if (sourceZoneParent === childItem.props.id || idsInPath.indexOf(childItem.props.id) > -1) {
+          return childItem;
+        }
+        return null;
+      }
+    );
+    return __spreadProps(__spreadValues({}, modified), {
+      ui: __spreadProps(__spreadValues({}, modified.ui), {
+        itemSelector: {
+          index: action.sourceIndex + 1,
+          zone: action.sourceZone
+        }
+      })
     });
-    if (Object.keys(readOnly).length) {
-      resolvedItem.readOnly = readOnly;
-    }
-    cache.lastChange[item.props.id] = {
-      item,
-      resolved: resolvedItem
-    };
-    if (onResolveEnd) {
-      onResolveEnd(resolvedItem);
+  }
+  if (action.type === "reorder") {
+    return reorderAction(state, action, appStore);
+  }
+  if (action.type === "move") {
+    if (action.sourceZone === action.destinationZone && action.sourceIndex === action.destinationIndex) {
+      return state;
     }
-    return resolvedItem;
+    const item = getItem(
+      { zone: action.sourceZone, index: action.sourceIndex },
+      state
+    );
+    if (!item) return state;
+    const idsInSourcePath = getIdsForParent(action.sourceZone, state);
+    const idsInDestinationPath = getIdsForParent(action.destinationZone, state);
+    return walkTree(
+      state,
+      appStore.config,
+      (content, zoneCompound) => {
+        if (zoneCompound === action.sourceZone && zoneCompound === action.destinationZone) {
+          return insert(
+            remove(content, action.sourceIndex),
+            action.destinationIndex,
+            item
+          );
+        } else if (zoneCompound === action.sourceZone) {
+          return remove(content, action.sourceIndex);
+        } else if (zoneCompound === action.destinationZone) {
+          return insert(content, action.destinationIndex, item);
+        }
+        return content;
+      },
+      (childItem) => {
+        const [sourceZoneParent] = action.sourceZone.split(":");
+        const [destinationZoneParent] = action.destinationZone.split(":");
+        const childId = childItem.props.id;
+        if (sourceZoneParent === childId || destinationZoneParent === childId || item.props.id === childId || idsInSourcePath.indexOf(childId) > -1 || idsInDestinationPath.indexOf(childId) > -1) {
+          return childItem;
+        }
+        return null;
+      }
+    );
   }
-  return item;
-});
-
-// lib/resolve-root-data.ts
-var cache2 = {};
-function resolveRootData(data, config, metadata) {
-  return __async(this, null, function* () {
-    var _a, _b, _c, _d, _e;
-    if (((_a = config.root) == null ? void 0 : _a.resolveData) && data.root.props) {
-      if (((_b = cache2.lastChange) == null ? void 0 : _b.original) === data.root) {
-        return cache2.lastChange.resolved;
-      }
-      const changed = getChanged(data.root, (_c = cache2.lastChange) == null ? void 0 : _c.original);
-      const rootWithProps = data.root;
-      const resolvedRoot = yield (_e = config.root) == null ? void 0 : _e.resolveData(rootWithProps, {
-        changed,
-        lastData: ((_d = cache2.lastChange) == null ? void 0 : _d.original) || {},
-        metadata: metadata || {}
+  if (action.type === "remove") {
+    const item = getItem({ index: action.index, zone: action.zone }, state);
+    let deindexed = deindex(state, item);
+    const [parentId] = action.zone.split(":");
+    return walkTree(
+      __spreadProps(__spreadValues({}, state), { indexes: deindexed }),
+      appStore.config,
+      (content, zoneCompound) => {
+        if (zoneCompound === action.zone) {
+          return remove(content, action.index);
+        }
+        return content;
+      },
+      (childItem, path) => {
+        const parentIds = path.map((p) => p.split(":")[0]);
+        if (childItem.props.id === parentId || childItem.props.id === item.props.id || parentIds.indexOf(item.props.id) > -1) {
+          return childItem;
+        }
+        return null;
+      }
+    );
+  }
+  if (action.type === "registerZone") {
+    if (zoneCache[action.zone]) {
+      return __spreadProps(__spreadValues({}, state), {
+        data: __spreadProps(__spreadValues({}, state.data), {
+          zones: __spreadProps(__spreadValues({}, state.data.zones), {
+            [action.zone]: zoneCache[action.zone]
+          })
+        }),
+        indexes: __spreadProps(__spreadValues({}, state.indexes), {
+          zones: __spreadProps(__spreadValues({}, state.indexes.zones), {
+            [action.zone]: __spreadProps(__spreadValues({}, state.indexes.zones[action.zone]), {
+              contentIds: zoneCache[action.zone].map((item) => item.props.id),
+              type: "dropzone"
+            })
+          })
+        })
       });
-      cache2.lastChange = {
-        original: data.root,
-        resolved: resolvedRoot
-      };
-      return __spreadProps(__spreadValues(__spreadValues({}, data.root), resolvedRoot), {
-        props: __spreadValues(__spreadValues({}, data.root.props), resolvedRoot.props)
+    }
+    return __spreadProps(__spreadValues({}, state), { data: setupZone(state.data, action.zone) });
+  }
+  if (action.type === "unregisterZone") {
+    const _zones = __spreadValues({}, state.data.zones || {});
+    const zoneIndex = __spreadValues({}, state.indexes.zones || {});
+    if (_zones[action.zone]) {
+      zoneCache[action.zone] = _zones[action.zone];
+      delete _zones[action.zone];
+    }
+    delete zoneIndex[action.zone];
+    return __spreadProps(__spreadValues({}, state), {
+      data: __spreadProps(__spreadValues({}, state.data), {
+        zones: _zones
+      }),
+      indexes: __spreadProps(__spreadValues({}, state.indexes), {
+        zones: zoneIndex
+      })
+    });
+  }
+  if (action.type === "setData") {
+    if (typeof action.data === "object") {
+      console.warn(
+        "`setData` is expensive and may cause unnecessary re-renders. Consider using a more atomic action instead."
+      );
+      return walkTree(
+        __spreadProps(__spreadValues({}, state), {
+          data: __spreadValues(__spreadValues({}, state.data), action.data)
+        }),
+        appStore.config
+      );
+    }
+    return walkTree(
+      __spreadProps(__spreadValues({}, state), {
+        data: __spreadValues(__spreadValues({}, state.data), action.data(state.data))
+      }),
+      appStore.config
+    );
+  }
+  if (action.type === "setUi") {
+    if (typeof action.ui === "object") {
+      return __spreadProps(__spreadValues({}, state), {
+        ui: __spreadValues(__spreadValues({}, state.ui), action.ui)
       });
     }
-    return data.root;
-  });
+    return __spreadProps(__spreadValues({}, state), {
+      ui: __spreadValues(__spreadValues({}, state.ui), action.ui(state.ui))
+    });
+  }
+  return state;
 }
 
-// lib/default-data.ts
-var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
-  root: data.root || {},
-  content: data.content || []
-});
+// reducer/actions.tsx
+init_react_import();
 
-// lib/resolve-all-data.ts
-function resolveAllData(_0, _1) {
-  return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
-    const defaultedData = defaultData(data);
-    const dynamicRoot = yield resolveRootData(
-      defaultedData,
-      config,
-      metadata
-    );
-    const { zones = {} } = data;
-    const zoneKeys = Object.keys(zones);
-    const resolvedZones = {};
-    for (let i = 0; i < zoneKeys.length; i++) {
-      const zoneKey = zoneKeys[i];
-      resolvedZones[zoneKey] = yield resolveAllComponentData(
-        zones[zoneKey],
-        config,
-        metadata,
-        onResolveStart,
-        onResolveEnd
-      );
+// reducer/index.ts
+function storeInterceptor(reducer, record, onAction) {
+  return (state, action) => {
+    const newAppState = reducer(state, action);
+    const isValidType = ![
+      "registerZone",
+      "unregisterZone",
+      "setData",
+      "setUi",
+      "set"
+    ].includes(action.type);
+    if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
+      if (record) record(newAppState);
     }
-    return __spreadProps(__spreadValues({}, defaultedData), {
-      root: dynamicRoot,
-      content: yield resolveAllComponentData(
-        defaultedData.content,
-        config,
-        metadata,
-        onResolveStart,
-        onResolveEnd
-      ),
-      zones: resolvedZones
-    });
-  });
+    onAction == null ? void 0 : onAction(action, newAppState, state);
+    return newAppState;
+  };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Render,
-  resolveAllData
-});
+function createReducer({
+  config,
+  record,
+  onAction,
+  appStore
+}) {
+  return storeInterceptor(
+    (state, action) => {
+      const result = reduce(state, action, appStore);
+      console.log(action.type, state, result);
+      return result;
+    },
+    record,
+    onAction
+  );
+}
+
+// components/ViewportControls/default-viewports.ts
+init_react_import();
+var defaultViewports = [
+  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
+  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
+  { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
+];
+
+// store/index.ts
+var import_zustand2 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
+var import_react9 = require("react");
+
+// store/slices/history.ts
+init_react_import();
+var import_react6 = require("react");
+
+// lib/use-hotkey.ts
+init_react_import();
+var import_react5 = require("react");
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var useHotkeyStore = (0, import_zustand.create)()(
+  (0, import_middleware.subscribeWithSelector)((set) => ({
+    held: {},
+    hold: (key) => set((s) => s.held[key] ? s : { held: __spreadProps(__spreadValues({}, s.held), { [key]: true }) }),
+    release: (key) => set((s) => s.held[key] ? { held: __spreadProps(__spreadValues({}, s.held), { [key]: false }) } : s),
+    reset: (held = {}) => set(() => ({ held })),
+    triggers: {}
+  }))
+);
+
+// store/slices/history.ts
+var EMPTY_HISTORY_INDEX = 0;
+function debounce(func, timeout2 = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout2);
+  };
+}
+var tidyState = (state) => {
+  return __spreadProps(__spreadValues({}, state), {
+    ui: __spreadProps(__spreadValues({}, state.ui), {
+      field: {
+        focus: null
+      }
+    })
+  });
+};
+var createHistorySlice = (set, get) => {
+  const record = debounce((state) => {
+    const { histories, index } = get().history;
+    const history = {
+      state,
+      id: generateId("history")
+    };
+    const newHistories = [...histories.slice(0, index + 1), history];
+    set({
+      history: __spreadProps(__spreadValues({}, get().history), {
+        histories: newHistories,
+        index: newHistories.length - 1
+      })
+    });
+  }, 250);
+  return {
+    initialAppState: {},
+    index: EMPTY_HISTORY_INDEX,
+    histories: [],
+    hasPast: () => get().history.index > EMPTY_HISTORY_INDEX,
+    hasFuture: () => get().history.index < get().history.histories.length - 1,
+    prevHistory: () => {
+      const { history } = get();
+      return history.hasPast() ? history.histories[history.index - 1] : null;
+    },
+    nextHistory: () => {
+      const s = get().history;
+      return s.hasFuture() ? s.histories[s.index + 1] : null;
+    },
+    currentHistory: () => get().history.histories[get().history.index],
+    back: () => {
+      var _a;
+      const { history, dispatch } = get();
+      if (history.hasPast()) {
+        const state = tidyState(
+          ((_a = history.prevHistory()) == null ? void 0 : _a.state) || history.initialAppState
+        );
+        dispatch({
+          type: "set",
+          state
+        });
+        set({ history: __spreadProps(__spreadValues({}, history), { index: history.index - 1 }) });
+      }
+    },
+    forward: () => {
+      var _a;
+      const { history, dispatch } = get();
+      if (history.hasFuture()) {
+        const state = (_a = history.nextHistory()) == null ? void 0 : _a.state;
+        dispatch({ type: "set", state: state ? tidyState(state) : {} });
+        set({ history: __spreadProps(__spreadValues({}, history), { index: history.index + 1 }) });
+      }
+    },
+    setHistories: (histories) => {
+      var _a;
+      const { dispatch, history } = get();
+      dispatch({
+        type: "set",
+        state: ((_a = history.histories[history.histories.length - 1]) == null ? void 0 : _a.state) || history.initialAppState
+      });
+      set({ history: __spreadProps(__spreadValues({}, history), { histories, index: histories.length - 1 }) });
+    },
+    setHistoryIndex: (index) => {
+      var _a;
+      const { dispatch, history } = get();
+      dispatch({
+        type: "set",
+        state: ((_a = history.histories[history.index]) == null ? void 0 : _a.state) || history.initialAppState
+      });
+      set({ history: __spreadProps(__spreadValues({}, history), { index }) });
+    },
+    record
+  };
+};
+
+// store/slices/nodes.ts
+init_react_import();
+var createNodesSlice = (set, get) => ({
+  nodes: {},
+  registerNode: (id, node) => {
+    const s = get().nodes;
+    const emptyNode = {
+      id,
+      methods: { sync: () => null },
+      element: null
+    };
+    const existingNode = s.nodes[id];
+    set({
+      nodes: __spreadProps(__spreadValues({}, s), {
+        nodes: __spreadProps(__spreadValues({}, s.nodes), {
+          [id]: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, emptyNode), existingNode), node), {
+            id
+          })
+        })
+      })
+    });
+  },
+  unregisterNode: (id) => {
+    const s = get().nodes;
+    const existingNode = s.nodes[id];
+    if (existingNode) {
+      const newNodes = __spreadValues({}, s.nodes);
+      delete newNodes[id];
+      set({
+        nodes: __spreadProps(__spreadValues({}, s), {
+          nodes: newNodes
+        })
+      });
+    }
+  }
+});
+
+// store/slices/permissions.ts
+init_react_import();
+var import_react7 = require("react");
+
+// lib/flatten-data.ts
+init_react_import();
+var flattenData = (state, config) => {
+  const data = [];
+  walkTree(
+    state,
+    config,
+    (content) => content,
+    (item) => {
+      data.push(item);
+      return null;
+    }
+  );
+  return data;
+};
+
+// lib/get-changed.ts
+init_react_import();
+var getChanged = (newItem, oldItem) => {
+  return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
+    const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
+    const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
+    return __spreadProps(__spreadValues({}, acc), {
+      [item]: oldItemProps[item] !== newItemProps[item]
+    });
+  }, {}) : {};
+};
+
+// store/slices/permissions.ts
+var createPermissionsSlice = (set, get) => {
+  const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
+    const { state, permissions, config } = get();
+    const { cache: cache2, globalPermissions } = permissions;
+    const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const {
+        config: config2,
+        state: appState,
+        setComponentLoading,
+        unsetComponentLoading
+      } = get();
+      const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
+      if (!componentConfig) {
+        return;
+      }
+      const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig.permissions);
+      if (componentConfig.resolvePermissions) {
+        const changed = getChanged(item2, (_a = cache2[item2.props.id]) == null ? void 0 : _a.lastData);
+        if (Object.values(changed).some((el) => el === true) || force2) {
+          setComponentLoading(item2.props.id);
+          const resolvedPermissions = yield componentConfig.resolvePermissions(
+            item2,
+            {
+              changed,
+              lastPermissions: ((_b = cache2[item2.props.id]) == null ? void 0 : _b.lastPermissions) || null,
+              permissions: initialPermissions,
+              appState,
+              lastData: ((_c = cache2[item2.props.id]) == null ? void 0 : _c.lastData) || null
+            }
+          );
+          const latest = get().permissions;
+          set({
+            permissions: __spreadProps(__spreadValues({}, latest), {
+              cache: __spreadProps(__spreadValues({}, latest.cache), {
+                [item2.props.id]: {
+                  lastData: item2,
+                  lastPermissions: resolvedPermissions
+                }
+              }),
+              resolvedPermissions: __spreadProps(__spreadValues({}, latest.resolvedPermissions), {
+                [item2.props.id]: resolvedPermissions
+              })
+            })
+          });
+          unsetComponentLoading(item2.props.id);
+        }
+      }
+    });
+    const resolveDataForRoot = (force2 = false) => {
+      const { state: appState } = get();
+      resolveDataForItem(
+        // Shim the root data in by conforming to component data shape
+        {
+          type: "root",
+          props: __spreadProps(__spreadValues({}, appState.data.root.props), { id: "puck-root" })
+        },
+        force2
+      );
+    };
+    const { item, type, root } = params;
+    if (item) {
+      yield resolveDataForItem(item, force);
+    } else if (type) {
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+        yield resolveDataForItem(item2, force);
+      }));
+    } else if (root) {
+      resolveDataForRoot(force);
+    } else {
+      resolveDataForRoot(force);
+      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
+        yield resolveDataForItem(item2, force);
+      }));
+    }
+  });
+  const refreshPermissions = (params) => resolvePermissions(params, true);
+  return {
+    cache: {},
+    globalPermissions: {
+      drag: true,
+      edit: true,
+      delete: true,
+      duplicate: true,
+      insert: true
+    },
+    resolvedPermissions: {},
+    getPermissions: ({ item, type, root } = {}) => {
+      const { config, permissions } = get();
+      const { globalPermissions, resolvedPermissions } = permissions;
+      if (item) {
+        const componentConfig = config.components[item.type];
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
+        const resolvedForItem = resolvedPermissions[item.props.id];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      } else if (type) {
+        const componentConfig = config.components[type];
+        return __spreadValues(__spreadValues({}, globalPermissions), componentConfig == null ? void 0 : componentConfig.permissions);
+      } else if (root) {
+        const rootConfig = config.root;
+        const initialPermissions = __spreadValues(__spreadValues({}, globalPermissions), rootConfig == null ? void 0 : rootConfig.permissions);
+        const resolvedForItem = resolvedPermissions["puck-root"];
+        return resolvedForItem ? __spreadValues(__spreadValues({}, globalPermissions), resolvedForItem) : initialPermissions;
+      }
+      return globalPermissions;
+    },
+    resolvePermissions,
+    refreshPermissions
+  };
+};
+
+// store/slices/fields.ts
+init_react_import();
+var import_react8 = require("react");
+var createFieldsSlice = (_set, _get) => {
+  return {
+    fields: {},
+    loading: false,
+    lastResolvedData: {}
+  };
+};
+
+// lib/resolve-component-data.ts
+init_react_import();
+
+// lib/map-slots.ts
+init_react_import();
+function mapSlots(item, map, recursive = true, isSlot2) {
+  return __async(this, null, function* () {
+    const props = __spreadValues({}, item.props);
+    yield forEachSlot(
+      item,
+      (_parentId, propName, content) => __async(this, null, function* () {
+        const mappedContent = recursive ? yield Promise.all(
+          content.map((item2) => __async(this, null, function* () {
+            return yield mapSlots(item2, map, recursive, isSlot2);
+          }))
+        ) : content;
+        props[propName] = yield map(mappedContent, propName);
+      }),
+      false,
+      isSlot2
+    );
+    return __spreadProps(__spreadValues({}, item), { props });
+  });
+}
+
+// lib/resolve-component-data.ts
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var cache = { lastChange: {} };
+var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace", recursive = true) {
+  const configForItem = "type" in item ? config.components[item.type] : config.root;
+  if ((configForItem == null ? void 0 : configForItem.resolveData) && item.props) {
+    const id = "id" in item.props ? item.props.id : "root";
+    const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
+    if (item && item === oldItem) {
+      return resolved;
+    }
+    const changed = getChanged(item, oldItem);
+    if (onResolveStart) {
+      onResolveStart(item);
+    }
+    const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
+      changed,
+      lastData: oldItem,
+      metadata,
+      trigger
+    });
+    let resolvedItem = __spreadProps(__spreadValues({}, item), {
+      props: __spreadValues(__spreadValues({}, item.props), resolvedProps)
+    });
+    if (recursive) {
+      resolvedItem = yield mapSlots(resolvedItem, (content) => __async(void 0, null, function* () {
+        return Promise.all(
+          content.map(
+            (childItem) => __async(void 0, null, function* () {
+              return (yield resolveComponentData(
+                childItem,
+                config,
+                metadata,
+                onResolveStart,
+                onResolveEnd,
+                trigger,
+                false
+              )).node;
+            })
+          )
+        );
+      }));
+    }
+    if (Object.keys(readOnly).length) {
+      resolvedItem.readOnly = readOnly;
+    }
+    cache.lastChange[id] = {
+      item,
+      resolved: resolvedItem
+    };
+    if (onResolveEnd) {
+      onResolveEnd(resolvedItem);
+    }
+    return { node: resolvedItem, didChange: !(0, import_fast_deep_equal.default)(item, resolvedItem) };
+  }
+  return { node: item, didChange: false };
+});
+
+// lib/to-root.ts
+init_react_import();
+var toRoot = (item) => {
+  if ("type" in item && item.type !== "root") {
+    throw new Error("Converting non-root item to root.");
+  }
+  const { readOnly } = item;
+  if (item.props) {
+    if ("id" in item.props) {
+      const _a = item.props, { id } = _a, props = __objRest(_a, ["id"]);
+      return { props, readOnly };
+    }
+    return { props: item.props, readOnly };
+  }
+  return { props: {}, readOnly };
+};
+
+// store/index.ts
+var defaultAppState = {
+  data: { content: [], root: {}, zones: {} },
+  ui: {
+    leftSideBarVisible: true,
+    rightSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null,
+    componentList: {},
+    isDragging: false,
+    previewMode: "edit",
+    viewports: {
+      current: {
+        width: defaultViewports[0].width,
+        height: defaultViewports[0].height || "auto"
+      },
+      options: [],
+      controlsVisible: true
+    },
+    field: { focus: null }
+  },
+  indexes: {
+    nodes: {},
+    zones: {}
+  }
+};
+var defaultPageFields = {
+  title: { type: "text" }
+};
+var createAppStore = (initialAppStore) => (0, import_zustand2.create)()(
+  (0, import_middleware2.subscribeWithSelector)((set, get) => __spreadProps(__spreadValues({
+    state: defaultAppState,
+    config: { components: {} },
+    componentState: {},
+    plugins: [],
+    overrides: {},
+    viewports: defaultViewports,
+    zoomConfig: {
+      autoZoom: 1,
+      rootHeight: 0,
+      zoom: 1
+    },
+    status: "LOADING",
+    iframe: {},
+    metadata: {}
+  }, initialAppStore), {
+    fields: createFieldsSlice(set, get),
+    history: createHistorySlice(set, get),
+    nodes: createNodesSlice(set, get),
+    permissions: createPermissionsSlice(set, get),
+    getComponentConfig: (type) => {
+      var _a;
+      const { config, selectedItem } = get();
+      const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
+      return type && type !== "root" ? config.components[type] : selectedItem ? config.components[selectedItem.type] : __spreadProps(__spreadValues({}, config.root), { fields: rootFields });
+    },
+    dispatch: (action) => set((s) => {
+      var _a, _b;
+      const { record } = get().history;
+      const dispatch = createReducer({
+        config: s.config,
+        record,
+        appStore: s
+      });
+      const state = dispatch(s.state, action);
+      const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
+      (_b = (_a = get()).onAction) == null ? void 0 : _b.call(_a, action, state, get().state);
+      return __spreadProps(__spreadValues({}, s), { state, selectedItem });
+    }),
+    setZoomConfig: (zoomConfig) => set({ zoomConfig }),
+    setStatus: (status) => set({ status }),
+    setComponentState: (componentState) => set({ componentState }),
+    pendingComponentLoads: {},
+    setComponentLoading: (id, loading = true, defer = 0) => {
+      const { setComponentState, pendingComponentLoads } = get();
+      const thisPendingComponentLoads = __spreadValues({}, pendingComponentLoads);
+      const setLoading = () => {
+        var _a;
+        const { componentState } = get();
+        setComponentState(__spreadProps(__spreadValues({}, componentState), {
+          [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+            loadingCount: (((_a = componentState[id]) == null ? void 0 : _a.loadingCount) || 0) + 1
+          })
+        }));
+      };
+      const unsetLoading = () => {
+        var _a;
+        const { componentState } = get();
+        setComponentState(__spreadProps(__spreadValues({}, componentState), {
+          [id]: __spreadProps(__spreadValues({}, componentState[id]), {
+            loadingCount: Math.max(
+              (((_a = componentState[id]) == null ? void 0 : _a.loadingCount) || 0) - 1,
+              0
+            )
+          })
+        }));
+      };
+      if (thisPendingComponentLoads[id]) {
+        clearTimeout(thisPendingComponentLoads[id]);
+        delete thisPendingComponentLoads[id];
+        set({ pendingComponentLoads: thisPendingComponentLoads });
+      }
+      const timeout2 = setTimeout(() => {
+        if (loading) {
+          setLoading();
+        } else {
+          unsetLoading();
+        }
+        delete thisPendingComponentLoads[id];
+        set({ pendingComponentLoads: thisPendingComponentLoads });
+      }, defer);
+      set({
+        pendingComponentLoads: __spreadProps(__spreadValues({}, thisPendingComponentLoads), {
+          [id]: timeout2
+        })
+      });
+    },
+    unsetComponentLoading: (id) => {
+      const { setComponentLoading } = get();
+      setComponentLoading(id, false);
+    },
+    // Helper
+    setUi: (ui, recordHistory) => set((s) => {
+      const dispatch = createReducer({
+        config: s.config,
+        record: () => {
+        },
+        appStore: s
+      });
+      const state = dispatch(s.state, {
+        type: "setUi",
+        ui,
+        recordHistory
+      });
+      const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
+      return __spreadProps(__spreadValues({}, s), { state, selectedItem });
+    }),
+    // resolveDataRuns: 0,
+    // resolveData: (newAppState) =>
+    //   set((s) => {
+    //     resolveData(newAppState, get);
+    //     return { ...s, resolveDataRuns: s.resolveDataRuns + 1 };
+    //   }),
+    resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
+      const { config, metadata, setComponentLoading } = get();
+      return yield resolveComponentData(
+        componentData,
+        config,
+        metadata,
+        (item) => setComponentLoading(
+          "id" in item.props ? item.props.id : "root",
+          true,
+          50
+        ),
+        (item) => setComponentLoading(
+          "id" in item.props ? item.props.id : "root",
+          false,
+          0
+        ),
+        trigger
+      );
+    }),
+    resolveAndCommitData: () => __async(void 0, null, function* () {
+      const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
+      walkTree(
+        state,
+        config,
+        (content) => content,
+        (childItem) => {
+          resolveComponentData2(childItem, "load").then((resolved) => {
+            const { state: state2 } = get();
+            const node = state2.indexes.nodes[resolved.node.props.id];
+            if (node && resolved.didChange) {
+              if (resolved.node.props.id === "root") {
+                dispatch({
+                  type: "replaceRoot",
+                  root: toRoot(resolved.node)
+                });
+              } else {
+                const zoneCompound = `${node.parentId}:${node.zone}`;
+                const parentZone = state2.indexes.zones[zoneCompound];
+                const index = parentZone.contentIds.indexOf(
+                  resolved.node.props.id
+                );
+                dispatch({
+                  type: "replace",
+                  data: resolved.node,
+                  destinationIndex: index,
+                  destinationZone: zoneCompound
+                });
+              }
+            }
+          });
+          return childItem;
+        }
+      );
+    })
+  }))
+);
+var appStoreContext = (0, import_react9.createContext)(createAppStore());
+function useAppStore(selector) {
+  const context = (0, import_react9.useContext)(appStoreContext);
+  return (0, import_zustand2.useStore)(context, selector);
+}
+function useAppStoreApi() {
+  return (0, import_react9.useContext)(appStoreContext);
+}
+
+// components/Loader/index.tsx
+init_react_import();
+
+// lib/index.ts
+init_react_import();
+
+// lib/filter.ts
+init_react_import();
+
+// lib/replace.ts
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
+init_react_import();
+var styles_module_default2 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
+
+// components/Loader/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getClassName = get_class_name_factory_default("Loader", styles_module_default2);
+var Loader = (_a) => {
+  var _b = _a, {
+    color,
+    size = 16
+  } = _b, props = __objRest(_b, [
+    "color",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    __spreadValues({
+      className: getClassName(),
+      style: {
+        width: size,
+        height: size,
+        color
+      },
+      "aria-label": "loading"
+    }, props)
+  );
+};
+
+// components/ActionBar/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
+init_react_import();
+var styles_module_default3 = { "ActionBar": "_ActionBar_rvadt_1", "ActionBar-label": "_ActionBar-label_rvadt_18", "ActionBar-action": "_ActionBar-action_rvadt_30", "ActionBar-group": "_ActionBar-group_rvadt_38" };
+
+// components/ActionBar/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var getClassName2 = get_class_name_factory_default("ActionBar", styles_module_default3);
+var ActionBar = ({
+  label,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "div",
+  {
+    className: getClassName2(),
+    onClick: (e) => {
+      e.stopPropagation();
+    },
+    children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionBar.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("label"), children: label }) }),
+      children
+    ]
+  }
+);
+var Action = ({
+  children,
+  label,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "button",
+  {
+    type: "button",
+    className: getClassName2("action"),
+    onClick,
+    title: label,
+    children
+  }
+);
+var Group = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("group"), children });
+var Label = ({ label }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName2("label"), children: label });
+ActionBar.Action = Action;
+ActionBar.Label = Label;
+ActionBar.Group = Group;
+
+// components/DraggableComponent/index.tsx
+var import_react_dom = require("react-dom");
+
+// lib/dnd/collision/dynamic/index.ts
+init_react_import();
+var import_abstract8 = require("@dnd-kit/abstract");
+
+// lib/dnd/collision/directional/index.ts
+init_react_import();
+var import_abstract = require("@dnd-kit/abstract");
+
+// lib/dnd/collision/collision-debug.ts
+init_react_import();
+var DEBUG = false;
+var debugElements = {};
+var timeout;
+var collisionDebug = (a, b, id, color, label) => {
+  if (!DEBUG) return;
+  const debugId = `${id}-debug`;
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    Object.entries(debugElements).forEach(([id2, { svg }]) => {
+      svg.remove();
+      delete debugElements[id2];
+    });
+  }, 1e3);
+  requestAnimationFrame(() => {
+    var _a, _b;
+    const existingEl = debugElements[debugId];
+    let line = (_a = debugElements[debugId]) == null ? void 0 : _a.line;
+    let text = (_b = debugElements[debugId]) == null ? void 0 : _b.text;
+    if (!existingEl) {
+      const svgNs = "http://www.w3.org/2000/svg";
+      const svg = document.createElementNS(svgNs, "svg");
+      line = document.createElementNS(svgNs, "line");
+      text = document.createElementNS(svgNs, "text");
+      svg.setAttribute("id", debugId);
+      svg.setAttribute(
+        "style",
+        "position: fixed; height: 100%; width: 100%; pointer-events: none; top: 0px; left: 0px;"
+      );
+      svg.appendChild(line);
+      svg.appendChild(text);
+      text.setAttribute("fill", `black`);
+      document.body.appendChild(svg);
+      debugElements[debugId] = { svg, line, text };
+    }
+    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", (a.x - (a.x - b.x) / 2).toString());
+    text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
+    if (label) {
+      text.innerHTML = label;
+    }
+  });
+};
+
+// lib/dnd/collision/directional/index.ts
+var distanceChange = "increasing";
+var directionalCollision = (input, previous) => {
+  var _a;
+  const { dragOperation, droppable } = input;
+  const { shape: dropShape } = droppable;
+  const { position } = dragOperation;
+  const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
+  if (!dragShape || !dropShape) return null;
+  const dropCenter = dropShape.center;
+  const distanceToPrevious = Math.sqrt(
+    Math.pow(dropCenter.x - previous.x, 2) + Math.pow(dropCenter.y - previous.y, 2)
+  );
+  const distanceToCurrent = Math.sqrt(
+    Math.pow(dropCenter.x - position.current.x, 2) + Math.pow(dropCenter.y - position.current.y, 2)
+  );
+  distanceChange = distanceToCurrent === distanceToPrevious ? distanceChange : distanceToCurrent < distanceToPrevious ? "decreasing" : "increasing";
+  collisionDebug(
+    dragShape.center,
+    dropCenter,
+    droppable.id.toString(),
+    "rebeccapurple"
+  );
+  if (distanceChange === "decreasing") {
+    return {
+      id: droppable.id,
+      value: 1,
+      type: import_abstract.CollisionType.Collision
+    };
+  }
+  return null;
+};
+
+// lib/dnd/collision/dynamic/get-direction.ts
+init_react_import();
+var getDirection = (dragAxis, delta) => {
+  if (dragAxis === "dynamic") {
+    if (Math.abs(delta.y) > Math.abs(delta.x)) {
+      return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
+    } else {
+      return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
+    }
+  } else if (dragAxis === "x") {
+    return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
+  }
+  return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
+};
+
+// lib/dnd/collision/dynamic/get-midpoint-impact.ts
+init_react_import();
+var getMidpointImpact = (dragShape, dropShape, direction, offsetMultiplier = 0) => {
+  const dragRect = dragShape.boundingRectangle;
+  const dropCenter = dropShape.center;
+  if (direction === "down") {
+    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
+    return dragRect.bottom >= dropCenter.y + offset2;
+  } else if (direction === "up") {
+    const offset2 = offsetMultiplier * dropShape.boundingRectangle.height;
+    return dragRect.top < dropCenter.y - offset2;
+  } else if (direction === "left") {
+    const offset2 = offsetMultiplier * dropShape.boundingRectangle.width;
+    return dropCenter.x - offset2 >= dragRect.left;
+  }
+  const offset = offsetMultiplier * dropShape.boundingRectangle.width;
+  return dragRect.right - offset >= dropCenter.x;
+};
+
+// lib/dnd/collision/dynamic/track-movement-interval.ts
+init_react_import();
+var import_geometry = require("@dnd-kit/geometry");
+var INTERVAL_SENSITIVITY = 10;
+var intervalCache = {
+  current: { x: 0, y: 0 },
+  delta: { x: 0, y: 0 },
+  previous: { x: 0, y: 0 },
+  direction: null
+};
+var trackMovementInterval = (point, dragAxis = "dynamic") => {
+  intervalCache.current = point;
+  intervalCache.delta = {
+    x: point.x - intervalCache.previous.x,
+    y: point.y - intervalCache.previous.y
+  };
+  intervalCache.direction = getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
+  if (Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY || Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY) {
+    intervalCache.previous = import_geometry.Point.from(point);
+  }
+  return intervalCache;
+};
+
+// ../../node_modules/@dnd-kit/collision/dist/index.js
+init_react_import();
+var import_abstract2 = require("@dnd-kit/abstract");
+var import_geometry2 = require("@dnd-kit/geometry");
+var import_abstract3 = require("@dnd-kit/abstract");
+var import_geometry3 = require("@dnd-kit/geometry");
+var import_abstract4 = require("@dnd-kit/abstract");
+var import_geometry4 = require("@dnd-kit/geometry");
+var import_abstract5 = require("@dnd-kit/abstract");
+var import_geometry5 = require("@dnd-kit/geometry");
+var import_abstract6 = require("@dnd-kit/abstract");
+var import_geometry6 = require("@dnd-kit/geometry");
+var import_abstract7 = require("@dnd-kit/abstract");
+var import_geometry7 = require("@dnd-kit/geometry");
+var pointerIntersection = ({
+  dragOperation,
+  droppable
+}) => {
+  const pointerCoordinates = dragOperation.position.current;
+  if (!pointerCoordinates) {
+    return null;
+  }
+  const { id } = droppable;
+  if (!droppable.shape) {
+    return null;
+  }
+  if (droppable.shape.containsPoint(pointerCoordinates)) {
+    const distance = import_geometry2.Point.distance(droppable.shape.center, pointerCoordinates);
+    return {
+      id,
+      value: 1 / distance,
+      type: import_abstract2.CollisionType.PointerIntersection,
+      priority: import_abstract2.CollisionPriority.High
+    };
+  }
+  return null;
+};
+var closestCorners = (input) => {
+  const { dragOperation, droppable } = input;
+  const { shape, position } = dragOperation;
+  if (!droppable.shape) {
+    return null;
+  }
+  const { left, top, right, bottom } = droppable.shape.boundingRectangle;
+  const corners = [
+    {
+      x: left,
+      y: top
+    },
+    {
+      x: right,
+      y: top
+    },
+    {
+      x: left,
+      y: bottom
+    },
+    {
+      x: right,
+      y: bottom
+    }
+  ];
+  const distance = corners.reduce(
+    (acc, corner) => {
+      var _a;
+      return acc + import_geometry4.Point.distance(
+        import_geometry4.Point.from(corner),
+        (_a = shape == null ? void 0 : shape.current.center) != null ? _a : position.current
+      );
+    },
+    0
+  );
+  const value = distance / 4;
+  return {
+    id: droppable.id,
+    value: 1 / value,
+    type: import_abstract4.CollisionType.Collision,
+    priority: import_abstract4.CollisionPriority.Normal
+  };
+};
+
+// lib/dnd/collision/dynamic/store.ts
+init_react_import();
+var import_vanilla = require("zustand/vanilla");
+var collisionStore = (0, import_vanilla.createStore)(() => ({
+  fallbackEnabled: false
+}));
+
+// lib/dnd/collision/dynamic/index.ts
+var flushNext = "";
+var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
+  var _a, _b, _c, _d, _e;
+  const { dragOperation, droppable } = input;
+  const { position } = dragOperation;
+  const dragShape = (_a = dragOperation.shape) == null ? void 0 : _a.current;
+  const { shape: dropShape } = droppable;
+  if (!dragShape || !dropShape) {
+    return null;
+  }
+  const { center: dragCenter } = dragShape;
+  const { fallbackEnabled } = collisionStore.getState();
+  const interval = trackMovementInterval(position.current, dragAxis);
+  dragOperation.data = __spreadProps(__spreadValues({}, dragOperation.data), {
+    direction: interval.direction
+  });
+  const collisionMap = dragOperation.data.collisionMap || {};
+  dragOperation.data.collisionMap = collisionMap;
+  collisionMap[droppable.id] = {
+    direction: interval.direction
+  };
+  const { center: dropCenter } = dropShape;
+  const overMidpoint = getMidpointImpact(
+    dragShape,
+    dropShape,
+    interval.direction,
+    midpointOffset
+  );
+  if (((_b = dragOperation.source) == null ? void 0 : _b.id) === droppable.id) {
+    const collision = directionalCollision(input, interval.previous);
+    collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
+    if (collision) {
+      return __spreadProps(__spreadValues({}, collision), {
+        priority: import_abstract8.CollisionPriority.Highest
+      });
+    }
+  }
+  const intersectionArea = dragShape.intersectionArea(dropShape);
+  const intersectionRatio = intersectionArea / dropShape.area;
+  if (intersectionArea && overMidpoint) {
+    collisionDebug(
+      dragCenter,
+      dropCenter,
+      droppable.id.toString(),
+      "green",
+      interval.direction
+    );
+    const collision = {
+      id: droppable.id,
+      value: intersectionRatio,
+      priority: import_abstract8.CollisionPriority.High,
+      type: import_abstract8.CollisionType.Collision
+    };
+    const shouldFlushId = flushNext === droppable.id;
+    flushNext = "";
+    return __spreadProps(__spreadValues({}, collision), { id: shouldFlushId ? "flush" : collision.id });
+  }
+  if (fallbackEnabled && ((_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) {
+      const fallbackCollision = closestCorners(input);
+      if (fallbackCollision) {
+        const direction = getDirection(dragAxis, {
+          x: dragShape.center.x - (((_d = droppable.shape) == null ? void 0 : _d.center.x) || 0),
+          y: dragShape.center.y - (((_e = droppable.shape) == null ? void 0 : _e.center.y) || 0)
+        });
+        collisionMap[droppable.id] = {
+          direction
+        };
+        if (intersectionArea) {
+          collisionDebug(
+            dragCenter,
+            dropCenter,
+            droppable.id.toString(),
+            "red",
+            direction || ""
+          );
+          flushNext = droppable.id;
+          return __spreadProps(__spreadValues({}, fallbackCollision), {
+            priority: import_abstract8.CollisionPriority.Low
+          });
+        }
+        collisionDebug(
+          dragCenter,
+          dropCenter,
+          droppable.id.toString(),
+          "orange",
+          direction || ""
+        );
+        return __spreadProps(__spreadValues({}, fallbackCollision), { priority: import_abstract8.CollisionPriority.Lowest });
+      }
+    }
+  }
+  collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
+  delete collisionMap[droppable.id];
+  return null;
+};
+
+// lib/dnd/dnd-kit/safe.ts
+init_react_import();
+var import_react10 = require("@dnd-kit/react");
+var import_sortable = require("@dnd-kit/react/sortable");
+function useDroppableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    } };
+  }
+  return (0, import_react10.useDroppable)(input);
+}
+function useDraggableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    } };
+  }
+  return (0, import_react10.useDraggable)(input);
+}
+function useSortableSafe(input) {
+  if (typeof window === "undefined") {
+    return { ref: () => {
+    }, status: "idle", handleRef: () => {
+    } };
+  }
+  return (0, import_sortable.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/DropZone/context.tsx
+init_react_import();
+var import_react11 = require("react");
+var import_zustand3 = require("zustand");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react11.createContext)(null);
+var ZoneStoreContext = (0, import_react11.createContext)(
+  (0, import_zustand3.createStore)(() => ({
+    zoneDepthIndex: {},
+    nextZoneDepthIndex: {},
+    areaDepthIndex: {},
+    nextAreaDepthIndex: {},
+    draggedItem: null,
+    previewIndex: {}
+  }))
+);
+var DropZoneProvider = ({
+  children,
+  value
+}) => {
+  const [hoveringComponent, setHoveringComponent] = (0, import_react11.useState)();
+  const [activeZones, setActiveZones] = (0, import_react11.useState)({});
+  const dispatch = useAppStore((s) => s.dispatch);
+  const registerZone = (0, import_react11.useCallback)(
+    (zoneCompound) => {
+      dispatch({
+        type: "registerZone",
+        zone: zoneCompound
+      });
+    },
+    [setActiveZones, dispatch]
+  );
+  const unregisterZone = (0, import_react11.useCallback)(
+    (zoneCompound) => {
+      dispatch({
+        type: "unregisterZone",
+        zone: zoneCompound
+      });
+    },
+    [setActiveZones, dispatch]
+  );
+  const memoValue = (0, import_react11.useMemo)(
+    () => __spreadValues({
+      hoveringComponent,
+      setHoveringComponent,
+      registerZone,
+      unregisterZone,
+      activeZones
+    }, value),
+    [value, hoveringComponent, activeZones]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
+};
+
+// lib/use-context-store.ts
+init_react_import();
+var import_react12 = require("react");
+var import_zustand4 = require("zustand");
+var import_shallow = require("zustand/react/shallow");
+function useContextStore(context, selector) {
+  const store = (0, import_react12.useContext)(context);
+  if (!store) {
+    throw new Error("useContextStore must be used inside context");
+  }
+  return (0, import_zustand4.useStore)(store, (0, import_shallow.useShallow)(selector));
+}
+
+// components/DraggableComponent/index.tsx
+var import_shallow2 = require("zustand/react/shallow");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getClassName3 = get_class_name_factory_default("DraggableComponent", styles_module_default);
+var DEBUG2 = false;
+var space = 8;
+var actionsOverlayTop = space * 6.5;
+var actionsTop = -(actionsOverlayTop - 8);
+var actionsSide = space;
+var DefaultActionBar = ({
+  label,
+  children,
+  parentAction
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionBar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionBar.Group, { children: [
+    parentAction,
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Label, { label })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Group, { children })
+] });
+var DraggableComponent = ({
+  children,
+  depth,
+  componentType,
+  id,
+  index,
+  zoneCompound,
+  isLoading = false,
+  isSelected = false,
+  debug,
+  label,
+  isEnabled,
+  autoDragAxis,
+  userDragAxis,
+  inDroppableZone = true
+}) => {
+  const zoom = useAppStore(
+    (s) => {
+      var _a;
+      return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) === id ? s.zoomConfig.zoom : 1;
+    }
+  );
+  const overrides = useAppStore((s) => s.overrides);
+  const dispatch = useAppStore((s) => s.dispatch);
+  const iframe = useAppStore((s) => s.iframe);
+  const ctx = (0, import_react13.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react13.useState)({});
+  const registerLocalZone = (0, import_react13.useCallback)(
+    (zoneCompound2, active) => {
+      var _a;
+      (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
+      setLocalZones((obj) => __spreadProps(__spreadValues({}, obj), {
+        [zoneCompound2]: active
+      }));
+    },
+    [setLocalZones]
+  );
+  const unregisterLocalZone = (0, import_react13.useCallback)(
+    (zoneCompound2) => {
+      var _a;
+      (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
+      setLocalZones((obj) => {
+        const newLocalZones = __spreadValues({}, obj);
+        delete newLocalZones[zoneCompound2];
+        return newLocalZones;
+      });
+    },
+    [setLocalZones]
+  );
+  const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
+  const path = useAppStore((0, import_shallow2.useShallow)((s) => {
+    var _a;
+    return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
+  }));
+  const permissions = useAppStore(
+    (0, import_shallow2.useShallow)((s) => s.permissions.getPermissions())
+    // TODO call using id
+  );
+  const userIsDragging = useContextStore(
+    ZoneStoreContext,
+    (s) => !!s.draggedItem
+  );
+  const canCollide = permissions.drag || userIsDragging;
+  const disabled = !isEnabled || !canCollide;
+  const [dragAxis, setDragAxis] = (0, import_react13.useState)(userDragAxis || autoDragAxis);
+  const { ref: sortableRef, status } = useSortableSafe({
+    id,
+    index,
+    group: zoneCompound,
+    type: "component",
+    data: {
+      areaId: ctx == null ? void 0 : ctx.areaId,
+      zone: zoneCompound,
+      index,
+      componentType,
+      containsActiveZone,
+      depth,
+      path: path || [],
+      inDroppableZone
+    },
+    collisionPriority: isEnabled ? depth : 0,
+    collisionDetector: createDynamicCollisionDetector(dragAxis),
+    disabled,
+    // "Out of the way" transition from react-beautiful-dnd
+    transition: {
+      duration: 200,
+      easing: "cubic-bezier(0.2, 0, 0, 1)"
+    }
+  });
+  const thisIsDragging = status === "dragging";
+  const ref = (0, import_react13.useRef)(null);
+  const refSetter = (0, import_react13.useCallback)(
+    (el) => {
+      sortableRef(el);
+      if (el) {
+        ref.current = el;
+      }
+    },
+    [sortableRef]
+  );
+  const [portalEl, setPortalEl] = (0, import_react13.useState)();
+  (0, import_react13.useEffect)(() => {
+    var _a, _b, _c;
+    setPortalEl(
+      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, ref.current]);
+  const getStyle = (0, import_react13.useCallback)(() => {
+    var _a, _b, _c;
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    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: 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`,
+      top: `${rect.top + scroll.y}px`,
+      height: `${rect.height}px`,
+      width: `${rect.width}px`
+    };
+    return style2;
+  }, [ref.current]);
+  const [style, setStyle] = (0, import_react13.useState)();
+  const sync = (0, import_react13.useCallback)(() => {
+    setStyle(getStyle());
+  }, [ref.current, iframe]);
+  (0, import_react13.useEffect)(() => {
+    if (ref.current && !userIsDragging) {
+      const observer = new ResizeObserver(sync);
+      observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref.current, userIsDragging]);
+  const registerNode = useAppStore((s) => s.nodes.registerNode);
+  (0, import_react13.useEffect)(() => {
+    var _a;
+    registerNode(id, { methods: { sync }, element: (_a = ref.current) != null ? _a : null });
+    return () => {
+      registerNode(id, { methods: { sync: () => null }, element: null });
+    };
+  }, [id, zoneCompound, index, componentType, sync]);
+  const CustomActionBar = (0, import_react13.useMemo)(
+    () => overrides.actionBar || DefaultActionBar,
+    [overrides.actionBar]
+  );
+  const onClick = (0, import_react13.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      dispatch({
+        type: "setUi",
+        ui: {
+          itemSelector: { index, zone: zoneCompound }
+        }
+      });
+    },
+    [index, zoneCompound, id]
+  );
+  const appStore = useAppStoreApi();
+  const onSelectParent = (0, import_react13.useCallback)(() => {
+    const { nodes, zones } = appStore.getState().state.indexes;
+    const node = nodes[id];
+    const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
+    if (!parentNode || !node.parentId) {
+      return;
+    }
+    const parentZoneCompound = `${parentNode.parentId}:${parentNode.zone}`;
+    const parentIndex = zones[parentZoneCompound].contentIds.indexOf(
+      node.parentId
+    );
+    dispatch({
+      type: "setUi",
+      ui: {
+        itemSelector: {
+          zone: parentZoneCompound,
+          index: parentIndex
+        }
+      }
+    });
+  }, [ctx, path]);
+  const onDuplicate = (0, import_react13.useCallback)(() => {
+    dispatch({
+      type: "duplicate",
+      sourceIndex: index,
+      sourceZone: zoneCompound
+    });
+  }, [index, zoneCompound]);
+  const onDelete = (0, import_react13.useCallback)(() => {
+    dispatch({
+      type: "remove",
+      index,
+      zone: zoneCompound
+    });
+  }, [index, zoneCompound]);
+  const [hover, setHover] = (0, import_react13.useState)(false);
+  const indicativeHover = (ctx == null ? void 0 : ctx.hoveringComponent) === id;
+  (0, import_react13.useEffect)(() => {
+    if (!ref.current) {
+      return;
+    }
+    const el = ref.current;
+    const _onMouseOver = (e) => {
+      if (userIsDragging) {
+        if (thisIsDragging) {
+          setHover(true);
+        } else {
+          setHover(false);
+        }
+      } else {
+        setHover(true);
+      }
+      e.stopPropagation();
+    };
+    const _onMouseOut = (e) => {
+      e.stopPropagation();
+      setHover(false);
+    };
+    el.setAttribute("data-puck-component", id);
+    el.setAttribute("data-puck-dnd", id);
+    el.style.position = "relative";
+    el.addEventListener("click", onClick);
+    el.addEventListener("mouseover", _onMouseOver);
+    el.addEventListener("mouseout", _onMouseOut);
+    if (thisIsDragging) {
+      el.setAttribute("data-puck-dragging", "");
+    } else {
+      el.removeAttribute("data-puck-dragging");
+    }
+    return () => {
+      el.removeAttribute("data-puck-component");
+      el.removeAttribute("data-puck-dnd");
+      el.removeEventListener("click", onClick);
+      el.removeEventListener("mouseover", _onMouseOver);
+      el.removeEventListener("mouseout", _onMouseOut);
+      el.removeAttribute("data-puck-dragging");
+    };
+  }, [
+    ref,
+    onClick,
+    containsActiveZone,
+    zoneCompound,
+    id,
+    userIsDragging,
+    thisIsDragging,
+    inDroppableZone
+  ]);
+  (0, import_react13.useEffect)(() => {
+    if (ref.current && disabled) {
+      ref.current.setAttribute("data-puck-disabled", "");
+      return () => {
+        var _a;
+        (_a = ref.current) == null ? void 0 : _a.removeAttribute("data-puck-disabled");
+      };
+    }
+  }, [disabled, ref]);
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
+    sync();
+    if ((isSelected || hover || indicativeHover) && !userIsDragging) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, [isSelected, hover, indicativeHover, iframe, userIsDragging]);
+  const syncActionsPosition = (0, import_react13.useCallback)(
+    (el) => {
+      if (el) {
+        const view = el.ownerDocument.defaultView;
+        if (view) {
+          const rect = el.getBoundingClientRect();
+          const diffLeft = rect.x;
+          const exceedsBoundsLeft = diffLeft < 0;
+          const diffTop = rect.y;
+          const exceedsBoundsTop = diffTop < 0;
+          if (exceedsBoundsLeft) {
+            el.style.transformOrigin = "left top";
+            el.style.left = "0px";
+          }
+          if (exceedsBoundsTop) {
+            el.style.top = "12px";
+            if (!exceedsBoundsLeft) {
+              el.style.transformOrigin = "right top";
+            }
+          }
+        }
+      }
+    },
+    [zoom]
+  );
+  (0, import_react13.useEffect)(() => {
+    if (userDragAxis) {
+      setDragAxis(userDragAxis);
+      return;
+    }
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "inline" || computedStyle.display === "inline-block") {
+        setDragAxis("x");
+        return;
+      }
+    }
+    setDragAxis(autoDragAxis);
+  }, [ref, userDragAxis, autoDragAxis]);
+  const parentAction = (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CornerLeftUp, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    DropZoneProvider,
+    {
+      value: __spreadProps(__spreadValues({}, ctx), {
+        areaId: id,
+        zoneCompound,
+        index,
+        depth: depth + 1,
+        registerLocalZone,
+        unregisterLocalZone
+      }),
+      children: [
+        isVisible && (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: getClassName3({
+                isSelected,
+                isDragging: thisIsDragging,
+                hover: hover || indicativeHover
+              }),
+              style: __spreadValues({}, style),
+              "data-puck-overlay": true,
+              children: [
+                debug,
+                isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loader, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: getClassName3("actionsOverlay"),
+                    style: {
+                      top: actionsOverlayTop / zoom
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        className: getClassName3("actions"),
+                        style: {
+                          transform: `scale(${1 / zoom}`,
+                          top: actionsTop / zoom,
+                          right: 0,
+                          paddingLeft: actionsSide,
+                          paddingRight: actionsSide
+                        },
+                        ref: syncActionsPosition,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                          CustomActionBar,
+                          {
+                            parentAction,
+                            label: DEBUG2 ? id : label,
+                            children: [
+                              permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Copy, { size: 16 }) }),
+                              permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Trash, { size: 16 }) })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("overlay") })
+              ]
+            }
+          ),
+          portalEl || document.body
+        ),
+        children(refSetter)
+      ]
+    }
+  );
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
+init_react_import();
+var styles_module_default4 = { "DropZone": "_DropZone_3dmev_1", "DropZone--hasChildren": "_DropZone--hasChildren_3dmev_11", "DropZone--userIsDragging": "_DropZone--userIsDragging_3dmev_19", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_3dmev_23", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_3dmev_24", "DropZone--isRootZone": "_DropZone--isRootZone_3dmev_24", "DropZone--isDestination": "_DropZone--isDestination_3dmev_34", "DropZone-item": "_DropZone-item_3dmev_46", "DropZone-hitbox": "_DropZone-hitbox_3dmev_50", "DropZone--isEnabled": "_DropZone--isEnabled_3dmev_58", "DropZone--isAnimating": "_DropZone--isAnimating_3dmev_67" };
+
+// components/Drawer/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css#css-module
+init_react_import();
+var styles_module_default5 = { "Drawer": "_Drawer_fkqfo_1", "Drawer-draggable": "_Drawer-draggable_fkqfo_8", "Drawer-draggableBg": "_Drawer-draggableBg_fkqfo_12", "Drawer-draggableFg": "_Drawer-draggableFg_fkqfo_21", "DrawerItem-draggable": "_DrawerItem-draggable_fkqfo_25", "DrawerItem--disabled": "_DrawerItem--disabled_fkqfo_38", "DrawerItem": "_DrawerItem_fkqfo_25", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_fkqfo_48", "DrawerItem-name": "_DrawerItem-name_fkqfo_66" };
+
+// components/DragIcon/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css#css-module
+init_react_import();
+var styles_module_default6 = { "DragIcon": "_DragIcon_17p8x_1", "DragIcon--disabled": "_DragIcon--disabled_17p8x_8" };
+
+// components/DragIcon/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var getClassName4 = get_class_name_factory_default("DragIcon", styles_module_default6);
+var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4({ disabled: isDragDisabled }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 20 20", width: "12", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) });
+
+// components/Drawer/index.tsx
+var import_react18 = require("react");
+
+// components/DragDropContext/index.tsx
+init_react_import();
+var import_react16 = require("@dnd-kit/react");
+var import_react17 = require("react");
+var import_dom = require("@dnd-kit/dom");
+
+// lib/dnd/NestedDroppablePlugin.ts
+init_react_import();
+var import_abstract9 = require("@dnd-kit/abstract");
+var import_state = require("@dnd-kit/state");
+
+// lib/throttle.ts
+init_react_import();
+
+// lib/get-frame.ts
+init_react_import();
+
+// lib/global-position.ts
+init_react_import();
+
+// lib/bubble-pointer-event.ts
+init_react_import();
+
+// lib/insert-component.ts
+init_react_import();
+
+// components/DragDropContext/index.tsx
+var import_use_debounce = require("use-debounce");
+var import_zustand5 = require("zustand");
+
+// lib/get-deep-dir.ts
+init_react_import();
+
+// lib/dnd/use-sensors.ts
+init_react_import();
+var import_react14 = require("react");
+
+// lib/dnd/PointerSensor.ts
+init_react_import();
+var import_state2 = require("@dnd-kit/state");
+var import_abstract10 = require("@dnd-kit/abstract");
+var import_geometry8 = require("@dnd-kit/geometry");
+var import_utilities = require("@dnd-kit/dom/utilities");
+var _clearTimeout;
+var _PointerSensor = class _PointerSensor extends import_abstract10.Sensor {
+  constructor(manager, options) {
+    super(manager);
+    this.manager = manager;
+    this.options = options;
+    this.listeners = new import_utilities.Listeners();
+    this.cleanup = /* @__PURE__ */ new Set();
+    this.source = void 0;
+    this.started = false;
+    __privateAdd(this, _clearTimeout);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    (0, import_state2.effect)(() => {
+      const unbindGlobal = this.bindGlobal(options != null ? options : {});
+      return () => {
+        unbindGlobal();
+      };
+    });
+  }
+  bind(source, options = this.options) {
+    const unbind = (0, import_state2.effect)(() => {
+      var _a;
+      const target = (_a = source.handle) != null ? _a : source.element;
+      const listener = (event) => {
+        if ((0, import_utilities.isPointerEvent)(event)) {
+          this.handlePointerDown(event, source, options);
+        }
+      };
+      if (target) {
+        patchWindow(target.ownerDocument.defaultView);
+        target.addEventListener("pointerdown", listener);
+        return () => {
+          target.removeEventListener("pointerdown", listener);
+        };
+      }
+    });
+    return unbind;
+  }
+  bindGlobal(options) {
+    const documents = /* @__PURE__ */ new Set();
+    for (const draggable of this.manager.registry.draggables.value) {
+      if (draggable.element) {
+        documents.add((0, import_utilities.getDocument)(draggable.element));
+      }
+    }
+    for (const droppable of this.manager.registry.droppables.value) {
+      if (droppable.element) {
+        documents.add((0, import_utilities.getDocument)(droppable.element));
+      }
+    }
+    const unbindFns = Array.from(documents).map(
+      (doc) => this.listeners.bind(doc, [
+        {
+          type: "pointermove",
+          listener: (event) => this.handlePointerMove(event, doc, options)
+        },
+        {
+          type: "pointerup",
+          listener: this.handlePointerUp,
+          options: {
+            capture: true
+          }
+        },
+        {
+          // Cancel activation if there is a competing Drag and Drop interaction
+          type: "dragstart",
+          listener: this.handleDragStart
+        }
+      ])
+    );
+    return () => {
+      unbindFns.forEach((unbind) => unbind());
+    };
+  }
+  handlePointerDown(event, source, options = {}) {
+    if (this.disabled || !event.isPrimary || event.button !== 0 || !(0, import_utilities.isElement)(event.target) || source.disabled) {
+      return;
+    }
+    const offset = (0, import_utilities.getFrameTransform)(source.element);
+    this.initialCoordinates = {
+      x: event.clientX * offset.scaleX + offset.x,
+      y: event.clientY * offset.scaleY + offset.y
+    };
+    this.source = source;
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
+    event.stopImmediatePropagation();
+    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
+      this.handleStart(source, event);
+    } else {
+      const { delay } = constraints;
+      if (delay) {
+        const timeout2 = setTimeout(
+          () => this.handleStart(source, event),
+          delay.value
+        );
+        __privateSet(this, _clearTimeout, () => {
+          clearTimeout(timeout2);
+          __privateSet(this, _clearTimeout, void 0);
+        });
+      }
+    }
+    const cleanup = () => {
+      var _a;
+      (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
+      this.initialCoordinates = void 0;
+      this.source = void 0;
+    };
+    this.cleanup.add(cleanup);
+  }
+  handlePointerMove(event, doc, options) {
+    if (!this.source) {
+      return;
+    }
+    const ownerDocument = this.source.element && (0, import_utilities.getDocument)(this.source.element);
+    if (doc !== ownerDocument) {
+      return;
+    }
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const offset = (0, import_utilities.getFrameTransform)(this.source.element);
+    coordinates.x = coordinates.x * offset.scaleX + offset.x;
+    coordinates.y = coordinates.y * offset.scaleY + offset.y;
+    if (this.manager.dragOperation.status.dragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.manager.actions.move({ to: coordinates });
+      return;
+    }
+    if (!this.initialCoordinates) {
+      return;
+    }
+    const delta = {
+      x: coordinates.x - this.initialCoordinates.x,
+      y: coordinates.y - this.initialCoordinates.y
+    };
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, this.source) : activationConstraints;
+    const { distance, delay } = constraints != null ? constraints : {};
+    if (distance) {
+      if (distance.tolerance != null && (0, import_geometry8.exceedsDistance)(delta, distance.tolerance)) {
+        return this.handleCancel();
+      }
+      if ((0, import_geometry8.exceedsDistance)(delta, distance.value)) {
+        return this.handleStart(this.source, event);
+      }
+    }
+    if (delay) {
+      if ((0, import_geometry8.exceedsDistance)(delta, delay.tolerance)) {
+        return this.handleCancel();
+      }
+    }
+  }
+  handlePointerUp(event) {
+    if (!this.source) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const { status } = this.manager.dragOperation;
+    if (!status.idle) {
+      const canceled = !status.initialized;
+      this.manager.actions.stop({ canceled });
+    } else if (this.started) {
+      setTimeout(() => {
+        if (!this.manager.dragOperation.status.idle) {
+          this.manager.actions.stop({ canceled: false });
+        }
+      }, 10);
+    }
+    this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleStart(source, event) {
+    var _a;
+    const { manager, initialCoordinates } = this;
+    (_a = __privateGet(this, _clearTimeout)) == null ? void 0 : _a.call(this);
+    if (!initialCoordinates || manager.dragOperation.status.initialized || this.started) {
+      return;
+    }
+    if (event.defaultPrevented) {
+      return;
+    }
+    this.started = true;
+    event.preventDefault();
+    (0, import_state2.batch)(() => {
+      manager.actions.setDragSource(source.id);
+      manager.actions.start({ coordinates: initialCoordinates, event });
+    });
+    const ownerDocument = (0, import_utilities.getDocument)(event.target);
+    const unbind = this.listeners.bind(ownerDocument, [
+      {
+        // Prevent scrolling on touch devices
+        type: "touchmove",
+        listener: preventDefault,
+        options: {
+          passive: false
+        }
+      },
+      {
+        // Prevent click events
+        type: "click",
+        listener: preventDefault
+      },
+      {
+        type: "keydown",
+        listener: this.handleKeyDown
+      }
+    ]);
+    ownerDocument.body.setPointerCapture(event.pointerId);
+    this.cleanup.add(unbind);
+    this.cleanup.add(() => {
+      this.started = false;
+    });
+  }
+  handleDragStart(event) {
+    const { target } = event;
+    if (!(0, import_utilities.isElement)(target)) {
+      return;
+    }
+    const isNativeDraggable = (0, import_utilities.isHTMLElement)(target) && target.draggable && target.getAttribute("draggable") === "true";
+    if (isNativeDraggable) {
+      this.handleCancel();
+    } else {
+      preventDefault(event);
+    }
+  }
+  handleCancel() {
+    const { dragOperation } = this.manager;
+    if (dragOperation.status.initialized) {
+      this.manager.actions.stop({ canceled: true });
+    }
+    this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
+  }
+  destroy() {
+    this.listeners.clear();
+  }
+};
+_clearTimeout = new WeakMap();
+_PointerSensor.configure = (0, import_abstract10.configurator)(_PointerSensor);
+var PointerSensor = _PointerSensor;
+function preventDefault(event) {
+  event.preventDefault();
+}
+function noop() {
+}
+var windows = /* @__PURE__ */ new WeakSet();
+function patchWindow(window2) {
+  if (!window2 || windows.has(window2)) {
+    return;
+  }
+  window2.addEventListener("touchmove", noop, {
+    capture: false,
+    passive: false
+  });
+  windows.add(window2);
+}
+
+// lib/dnd/use-sensors.ts
+var import_utilities2 = require("@dnd-kit/dom/utilities");
+
+// lib/use-safe-id.ts
+init_react_import();
+var import_react15 = __toESM(require("react"));
+var useSafeId = () => {
+  if (typeof import_react15.default.useId !== "undefined") {
+    return import_react15.default.useId();
+  }
+  const [id] = (0, import_react15.useState)(generateId());
+  return id;
+};
+
+// components/DragDropContext/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var dragListenerContext = (0, import_react17.createContext)({
+  dragListeners: {}
+});
+function useDragListener(type, fn, deps = []) {
+  const { setDragListeners } = (0, import_react17.useContext)(dragListenerContext);
+  (0, import_react17.useEffect)(() => {
+    if (setDragListeners) {
+      setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
+        [type]: [...old[type] || [], fn]
+      }));
+    }
+  }, deps);
+}
+
+// components/Drawer/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var getClassName5 = get_class_name_factory_default("Drawer", styles_module_default5);
+var getClassNameItem = get_class_name_factory_default("DrawerItem", styles_module_default5);
+var DrawerItemInner = ({
+  children,
+  name,
+  label,
+  dragRef,
+  isDragDisabled
+}) => {
+  const CustomInner = (0, import_react18.useMemo)(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("default"), children: children2 })),
+    [children]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: getClassNameItem({ disabled: isDragDisabled }),
+      ref: dragRef,
+      onMouseDown: (e) => e.preventDefault(),
+      "data-testid": dragRef ? `drawer-item:${name}` : "",
+      "data-puck-drawer-item": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassNameItem("draggable"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("name"), children: label != null ? label : name }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassNameItem("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragIcon, {}) })
+      ] }) }) })
+    }
+  );
+};
+var DrawerItemDraggable = ({
+  children,
+  name,
+  label,
+  id,
+  isDragDisabled
+}) => {
+  const { ref } = useDraggableSafe({
+    id,
+    data: { type: "drawer", componentType: name },
+    disabled: isDragDisabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: getClassName5("draggable"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DrawerItemInner, { name, label, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName5("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DrawerItemInner,
+      {
+        name,
+        label,
+        dragRef: ref,
+        isDragDisabled,
+        children
+      }
+    ) })
+  ] });
+};
+var DrawerItem = ({
+  name,
+  children,
+  id,
+  label,
+  index,
+  isDragDisabled
+}) => {
+  const resolvedId = id || name;
+  const [dynamicId, setDynamicId] = (0, import_react18.useState)(generateId(resolvedId));
+  if (typeof index !== "undefined") {
+    console.error(
+      "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
+    );
+  }
+  useDragListener(
+    "dragend",
+    () => {
+      setDynamicId(generateId(resolvedId));
+    },
+    [resolvedId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    DrawerItemDraggable,
+    {
+      name,
+      label,
+      id: dynamicId,
+      isDragDisabled,
+      children
+    }
+  ) }, dynamicId);
+};
+var Drawer = ({
+  children,
+  droppableId,
+  direction
+}) => {
+  if (droppableId) {
+    console.error(
+      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
+    );
+  }
+  if (direction) {
+    console.error(
+      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
+    );
+  }
+  const id = useSafeId();
+  const { ref } = useDroppableSafe({
+    id,
+    type: "void",
+    collisionPriority: 0
+    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: getClassName5(),
+      ref,
+      "data-puck-dnd": id,
+      "data-puck-drawer": true,
+      children
+    }
+  );
+};
+Drawer.Item = DrawerItem;
+
+// components/DropZone/lib/use-min-empty-height.ts
+init_react_import();
+var import_react19 = require("react");
+var useMinEmptyHeight = ({
+  zoneCompound,
+  userMinEmptyHeight,
+  ref
+}) => {
+  const appStore = useAppStoreApi();
+  const [prevHeight, setPrevHeight] = (0, import_react19.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react19.useState)(false);
+  const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
+    var _a, _b;
+    return {
+      draggedItem: ((_a = s.draggedItem) == null ? void 0 : _a.data.zone) === zoneCompound ? s.draggedItem : null,
+      isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
+    };
+  });
+  (0, import_react19.useEffect)(() => {
+    if (draggedItem && ref.current) {
+      if (isZone) {
+        const rect = ref.current.getBoundingClientRect();
+        setPrevHeight(rect.height);
+        setIsAnimating(true);
+        return;
+      }
+    }
+    setPrevHeight(0);
+    setTimeout(() => {
+      var _a, _b;
+      const zones = appStore.getState().state.indexes.zones;
+      const nodes = appStore.getState().nodes;
+      const selectedItem = appStore.getState().selectedItem;
+      const contentIds = ((_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) || [];
+      contentIds.forEach((contentId) => {
+        const node = nodes.nodes[contentId];
+        node == null ? void 0 : node.methods.sync();
+      });
+      if (selectedItem) {
+        (_b = nodes.nodes[selectedItem.props.id]) == null ? void 0 : _b.methods.sync();
+      }
+      setIsAnimating(false);
+    }, 400);
+  }, [ref.current, draggedItem, zoneCompound]);
+  return [prevHeight || userMinEmptyHeight, isAnimating];
+};
+
+// lib/assign-refs.ts
+init_react_import();
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+}
+function assignRefs(refs, node) {
+  refs.forEach((ref) => {
+    assignRef(ref, node);
+  });
+}
+
+// components/DropZone/lib/use-content-with-preview.ts
+init_react_import();
+var import_react22 = require("react");
+
+// lib/dnd/use-rendered-callback.ts
+init_react_import();
+var import_react20 = require("@dnd-kit/react");
+var import_react21 = require("react");
+function useRenderedCallback(callback, deps) {
+  const manager = (0, import_react20.useDragDropManager)();
+  return (0, import_react21.useCallback)(
+    (...args) => __async(this, null, function* () {
+      yield manager == null ? void 0 : manager.renderer.rendering;
+      return callback(...args);
+    }),
+    [...deps, manager]
+  );
+}
+
+// components/DropZone/lib/use-content-with-preview.ts
+var useContentIdsWithPreview = (contentIds, zoneCompound) => {
+  const { draggedItemId, preview, previewExists } = useContextStore(
+    ZoneStoreContext,
+    (s) => {
+      var _a;
+      return {
+        draggedItemId: (_a = s.draggedItem) == null ? void 0 : _a.id,
+        preview: s.previewIndex[zoneCompound],
+        previewExists: Object.keys(s.previewIndex || {}).length > 0
+      };
+    }
+  );
+  const isDragging = useAppStore((s) => s.state.ui.isDragging);
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react22.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react22.useState)(
+    preview
+  );
+  const updateContent = useRenderedCallback(
+    (contentIds2, preview2, isDragging2) => {
+      if (isDragging2 && !previewExists) {
+        return;
+      }
+      if (preview2) {
+        if (preview2.type === "insert") {
+          setContentIdsWithPreview(
+            insert(
+              contentIds2.filter((id) => id !== preview2.props.id),
+              preview2.index,
+              preview2.props.id
+            )
+          );
+        } else {
+          setContentIdsWithPreview(
+            insert(
+              contentIds2.filter((id) => id !== preview2.props.id),
+              preview2.index,
+              preview2.props.id
+            )
+          );
+        }
+      } else {
+        setContentIdsWithPreview(
+          previewExists ? contentIds2.filter((id) => id !== draggedItemId) : contentIds2
+        );
+      }
+      setLocalPreview(preview2);
+    },
+    [draggedItemId, previewExists]
+  );
+  (0, import_react22.useEffect)(() => {
+    updateContent(contentIds, preview, isDragging);
+  }, [contentIds, preview, isDragging]);
+  return [contentIdsWithPreview, localPreview];
+};
+
+// components/DropZone/lib/use-drag-axis.ts
+init_react_import();
+var import_react23 = require("react");
+var GRID_DRAG_AXIS = "dynamic";
+var FLEX_ROW_DRAG_AXIS = "x";
+var DEFAULT_DRAG_AXIS = "y";
+var useDragAxis = (ref, collisionAxis) => {
+  const status = useAppStore((s) => s.status);
+  const [dragAxis, setDragAxis] = (0, import_react23.useState)(
+    collisionAxis || DEFAULT_DRAG_AXIS
+  );
+  const calculateDragAxis = (0, import_react23.useCallback)(() => {
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+      if (computedStyle.display === "grid") {
+        setDragAxis(GRID_DRAG_AXIS);
+      } else if (computedStyle.display === "flex" && computedStyle.flexDirection === "row") {
+        setDragAxis(FLEX_ROW_DRAG_AXIS);
+      } else {
+        setDragAxis(DEFAULT_DRAG_AXIS);
+      }
+    }
+  }, [ref.current]);
+  (0, import_react23.useEffect)(() => {
+    const onViewportChange = () => {
+      calculateDragAxis();
+    };
+    window.addEventListener("viewportchange", onViewportChange);
+    return () => {
+      window.removeEventListener("viewportchange", onViewportChange);
+    };
+  }, []);
+  (0, import_react23.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  return [dragAxis, calculateDragAxis];
+};
+
+// components/DropZone/index.tsx
+var import_shallow3 = require("zustand/react/shallow");
+
+// components/Render/index.tsx
+init_react_import();
+var import_react24 = __toESM(require("react"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var renderContext = import_react24.default.createContext({
+  config: { components: {} },
+  data: { root: {}, content: [] },
+  metadata: {}
+});
+
+// components/DropZone/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getClassName6 = get_class_name_factory_default("DropZone", styles_module_default4);
+var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+var RENDER_DEBUG = false;
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneEdit, __spreadValues({}, props));
+var DropZoneChild = ({
+  zoneCompound,
+  componentId,
+  preview,
+  index,
+  isEnabled,
+  dragAxis,
+  collisionAxis,
+  inDroppableZone
+}) => {
+  var _a, _b;
+  const metadata = useAppStore((s) => s.metadata);
+  const puckProps = {
+    renderDropZone: DropZoneEditPure,
+    isEditing: true,
+    dragRef: null,
+    metadata
+  };
+  const ctx = (0, import_react25.useContext)(dropZoneContext);
+  const { depth } = ctx;
+  const nodeProps = useAppStore(
+    (0, import_shallow3.useShallow)((s) => {
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
+    })
+  );
+  const nodeType = useAppStore(
+    (s) => {
+      var _a2;
+      return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.type;
+    }
+  );
+  const node = { type: nodeType, props: nodeProps };
+  const item = nodeProps ? node : (preview == null ? void 0 : preview.componentType) ? { type: preview.componentType, props: preview.props } : null;
+  const componentConfig = useAppStore(
+    (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
+  );
+  const overrides = useAppStore((s) => s.overrides);
+  const isLoading = useAppStore(
+    (s) => {
+      var _a2;
+      return ((_a2 = s.componentState[componentId]) == null ? void 0 : _a2.loadingCount) > 0;
+    }
+  );
+  const isSelected = useAppStore(
+    (s) => {
+      var _a2;
+      return ((_a2 = s.selectedItem) == null ? void 0 : _a2.props.id) === componentId || false;
+    }
+  );
+  let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
+  const renderPreview = (0, import_react25.useMemo)(
+    () => function Preview3() {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DrawerItemInner, { name: label, children: overrides.componentItem });
+    },
+    [componentId, label, overrides]
+  );
+  const defaultsProps = (0, import_react25.useMemo)(
+    () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
+      puck: puckProps,
+      editMode: true
+      // DEPRECATED
+    }),
+    [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, puckProps]
+  );
+  const defaultedPropsWithSlots = useSlots(
+    componentConfig,
+    defaultsProps,
+    DropZoneEditPure
+  );
+  if (!item) return;
+  let Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+    "No configuration for ",
+    item.type
+  ] });
+  let componentType = item.type;
+  const isPreview = componentId === (preview == null ? void 0 : preview.props.id) && preview.type === "insert";
+  if (isPreview) {
+    Render2 = renderPreview;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    DraggableComponent,
+    {
+      id: componentId,
+      componentType,
+      zoneCompound,
+      depth: depth + 1,
+      index,
+      isLoading,
+      isSelected,
+      label,
+      isEnabled,
+      autoDragAxis: dragAxis,
+      userDragAxis: collisionAxis,
+      inDroppableZone,
+      children: (dragRef) => (componentConfig == null ? void 0 : componentConfig.inline) && !isPreview ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Render2,
+        __spreadProps(__spreadValues({}, defaultedPropsWithSlots), {
+          puck: __spreadProps(__spreadValues({}, defaultedPropsWithSlots.puck), {
+            dragRef
+          })
+        })
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: dragRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Render2, __spreadValues({}, defaultedPropsWithSlots)) })
+    }
+  );
+};
+var DropZoneEdit = (0, import_react25.forwardRef)(
+  function DropZoneEditInternal({
+    zone,
+    allow,
+    disallow,
+    style,
+    className,
+    minEmptyHeight: userMinEmptyHeight = 128,
+    collisionAxis
+  }, userRef) {
+    const ctx = (0, import_react25.useContext)(dropZoneContext);
+    const {
+      // These all need setting via context
+      areaId,
+      depth,
+      registerLocalZone,
+      unregisterLocalZone
+    } = ctx;
+    const path = useAppStore(
+      (0, import_shallow3.useShallow)((s) => {
+        var _a;
+        return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
+      })
+    );
+    let zoneCompound = rootDroppableId;
+    if (areaId) {
+      if (zone !== rootDroppableId) {
+        zoneCompound = `${areaId}:${zone}`;
+      }
+    }
+    const isRootZone = zoneCompound === rootDroppableId || zone === rootDroppableId || areaId === "root";
+    const {
+      isDeepestZone,
+      inNextDeepestArea,
+      draggedComponentType,
+      userIsDragging
+    } = useContextStore(ZoneStoreContext, (s) => {
+      var _a, _b;
+      return {
+        isDeepestZone: (_a = s.zoneDepthIndex[zoneCompound]) != null ? _a : false,
+        inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
+        draggedComponentType: (_b = s.draggedItem) == null ? void 0 : _b.data.componentType,
+        userIsDragging: !!s.draggedItem
+      };
+    });
+    const zoneContentIds = useAppStore(
+      (0, import_shallow3.useShallow)((s) => {
+        var _a;
+        return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
+      })
+    );
+    const zoneType = useAppStore(
+      (0, import_shallow3.useShallow)((s) => {
+        var _a;
+        return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
+      })
+    );
+    (0, import_react25.useEffect)(() => {
+      if (!zoneType || zoneType === "dropzone") {
+        if (ctx == null ? void 0 : ctx.registerZone) {
+          ctx == null ? void 0 : ctx.registerZone(zoneCompound);
+        }
+        return () => {
+          if (ctx == null ? void 0 : ctx.unregisterZone) {
+            ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+          }
+        };
+      }
+    }, [zoneType]);
+    const contentIds = (0, import_react25.useMemo)(() => {
+      return zoneContentIds || [];
+    }, [zoneContentIds]);
+    const ref = (0, import_react25.useRef)(null);
+    const acceptsTarget = (0, import_react25.useCallback)(
+      (componentType) => {
+        if (!componentType) {
+          return true;
+        }
+        if (disallow) {
+          const defaultedAllow = allow || [];
+          const filteredDisallow = (disallow || []).filter(
+            (item) => defaultedAllow.indexOf(item) === -1
+          );
+          if (filteredDisallow.indexOf(componentType) !== -1) {
+            return false;
+          }
+        } else if (allow) {
+          if (allow.indexOf(componentType) === -1) {
+            return false;
+          }
+        }
+        return true;
+      },
+      [allow, disallow]
+    );
+    (0, import_react25.useEffect)(() => {
+      if (registerLocalZone) {
+        registerLocalZone(zoneCompound, acceptsTarget(draggedComponentType));
+      }
+      return () => {
+        if (unregisterLocalZone) {
+          unregisterLocalZone(zoneCompound);
+        }
+      };
+    }, [draggedComponentType, zoneCompound]);
+    const hoveringOverArea = inNextDeepestArea || isRootZone;
+    let isEnabled = true;
+    if (userIsDragging) {
+      isEnabled = isDeepestZone;
+    }
+    if (isEnabled) {
+      isEnabled = acceptsTarget(draggedComponentType);
+    }
+    const [contentIdsWithPreview, preview] = useContentIdsWithPreview(
+      contentIds,
+      zoneCompound
+    );
+    const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
+    const droppableConfig = {
+      id: zoneCompound,
+      collisionPriority: isEnabled ? depth : 0,
+      disabled: !isDropEnabled,
+      collisionDetector: pointerIntersection,
+      type: "dropzone",
+      data: {
+        areaId,
+        depth,
+        isDroppableTarget: acceptsTarget(draggedComponentType),
+        path: path || []
+      }
+    };
+    const { ref: dropRef } = useDroppableSafe(droppableConfig);
+    const isAreaSelected = useAppStore(
+      (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
+    );
+    const [dragAxis] = useDragAxis(ref, collisionAxis);
+    const [minEmptyHeight, isAnimating] = useMinEmptyHeight({
+      zoneCompound,
+      userMinEmptyHeight,
+      ref
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `${getClassName6({
+          isRootZone,
+          userIsDragging,
+          hoveringOverArea,
+          isEnabled,
+          isAreaSelected,
+          hasChildren: contentIds.length > 0,
+          isAnimating
+        })}${className ? ` ${className}` : ""}`,
+        ref: (node) => {
+          assignRefs([ref, dropRef, userRef], node);
+        },
+        "data-testid": `dropzone:${zoneCompound}`,
+        "data-puck-dropzone": zoneCompound,
+        style: __spreadProps(__spreadValues({}, style), {
+          "--min-empty-height": `${minEmptyHeight}px`,
+          backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
+        }),
+        children: contentIdsWithPreview.map((componentId, i) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            DropZoneChild,
+            {
+              zoneCompound,
+              componentId,
+              preview,
+              dragAxis,
+              isEnabled,
+              index: i,
+              collisionAxis,
+              inDroppableZone: acceptsTarget(draggedComponentType)
+            },
+            componentId
+          );
+        })
+      }
+    );
+  }
+);
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneRender, __spreadValues({}, props));
+var DropZoneRender = (0, import_react25.forwardRef)(
+  function DropZoneRenderInternal({ className, style, zone }, ref) {
+    const ctx = (0, import_react25.useContext)(dropZoneContext);
+    const { areaId = "root" } = ctx || {};
+    const { config, data, metadata } = (0, import_react25.useContext)(renderContext);
+    let zoneCompound = rootDroppableId;
+    let content = (data == null ? void 0 : data.content) || [];
+    (0, import_react25.useEffect)(() => {
+      if (!content) {
+        if (ctx == null ? void 0 : ctx.registerZone) {
+          ctx == null ? void 0 : ctx.registerZone(zoneCompound);
+        }
+        return () => {
+          if (ctx == null ? void 0 : ctx.unregisterZone) {
+            ctx == null ? void 0 : ctx.unregisterZone(zoneCompound);
+          }
+        };
+      }
+    }, [content]);
+    if (!data || !config) {
+      return null;
+    }
+    if (areaId !== rootAreaId && zone !== rootZone) {
+      zoneCompound = `${areaId}:${zone}`;
+      content = setupZone(data, zoneCompound).zones[zoneCompound];
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style, ref, children: content.map((item) => {
+      const Component = config.components[item.type];
+      if (Component) {
+        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          SlotRenderPure,
+          __spreadProps(__spreadValues({}, slotProps), {
+            config,
+            metadata
+          })
+        ));
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          DropZoneProvider,
+          {
+            value: {
+              areaId: props.id,
+              depth: 1
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Component.render,
+              __spreadProps(__spreadValues({}, props), {
+                puck: {
+                  renderDropZone: DropZoneRenderPure,
+                  metadata: metadata || {}
+                }
+              })
+            )
+          },
+          props.id
+        );
+      }
+      return null;
+    }) });
+  }
+);
+var DropZone = (0, import_react25.forwardRef)(
+  function DropZone2(props, ref) {
+    const ctx = (0, import_react25.useContext)(dropZoneContext);
+    if ((ctx == null ? void 0 : ctx.mode) === "edit") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+  }
+);
+
+// components/SlotRender/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SlotRender, __spreadValues({}, props));
+var SlotRender = (0, import_react26.forwardRef)(
+  function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style, ref, children: content.map((item) => {
+      const Component = config.components[item.type];
+      if (Component) {
+        const props = useSlots(Component, item.props, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          SlotRenderPure,
+          __spreadProps(__spreadValues({}, slotProps), {
+            config,
+            metadata
+          })
+        ));
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Component.render,
+          __spreadProps(__spreadValues({}, props), {
+            puck: {
+              renderDropZone: DropZoneRenderPure,
+              metadata: metadata || {}
+            }
+          }),
+          props.id
+        );
+      }
+      return null;
+    }) });
+  }
+);
+
+// components/ServerRender/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DropZoneRender2({
+  zone,
+  data,
+  areaId = "root",
+  config,
+  metadata = {}
+}) {
+  let zoneCompound = rootDroppableId;
+  let content = (data == null ? void 0 : data.content) || [];
+  if (!data || !config) {
+    return null;
+  }
+  if (areaId !== rootAreaId && zone !== rootZone) {
+    zoneCompound = `${areaId}:${zone}`;
+    content = setupZone(data, zoneCompound).zones[zoneCompound];
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: content.map((item) => {
+    const Component = config.components[item.type];
+    const props = __spreadProps(__spreadValues({}, item.props), {
+      puck: {
+        renderDropZone: ({ zone: zone2 }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          DropZoneRender2,
+          {
+            zone: zone2,
+            data,
+            areaId: item.props.id,
+            config,
+            metadata
+          }
+        ),
+        metadata
+      }
+    });
+    const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+    if (Component) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component.render, __spreadValues({}, propsWithSlots), item.props.id);
+    }
+    return null;
+  }) });
+}
+function Render({
+  config,
+  data,
+  metadata = {}
+}) {
+  var _a;
+  const rootProps = data.root.props || data.root;
+  const title = rootProps.title || "";
+  const props = __spreadProps(__spreadValues({}, rootProps), {
+    puck: {
+      renderDropZone: ({ zone }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        DropZoneRender2,
+        {
+          zone,
+          data,
+          config,
+          metadata
+        }
+      ),
+      isEditing: false,
+      dragRef: null,
+      metadata
+    },
+    title,
+    editMode: false,
+    id: "puck-root"
+  });
+  const propsWithSlots = useSlots(config.root, props, (props2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, props2), { config, metadata })));
+  if ((_a = config.root) == null ? void 0 : _a.render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(config.root.render, __spreadProps(__spreadValues({}, propsWithSlots), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DropZoneRender2,
+      {
+        config,
+        data,
+        zone: rootZone,
+        metadata
+      }
+    ) }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    DropZoneRender2,
+    {
+      config,
+      data,
+      zone: rootZone,
+      metadata
+    }
+  );
+}
+
+// lib/resolve-all-data.ts
+init_react_import();
+
+// lib/default-data.ts
+init_react_import();
+var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
+  root: data.root || {},
+  content: data.content || []
+});
+
+// lib/to-component.ts
+init_react_import();
+var toComponent = (item) => {
+  return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
+    props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
+    type: "root"
+  });
+};
+
+// lib/resolve-all-data.ts
+function resolveAllData(_0, _1) {
+  return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
+    var _a;
+    const defaultedData = defaultData(data);
+    const resolveNode = (_node) => __async(this, null, function* () {
+      const node = toComponent(_node);
+      onResolveStart == null ? void 0 : onResolveStart(node);
+      const resolved = (yield resolveComponentData(
+        node,
+        config,
+        metadata,
+        () => {
+        },
+        () => {
+        },
+        "force",
+        false
+      )).node;
+      const resolvedDeep = yield mapSlots(resolved, processContent, false);
+      onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
+      return resolvedDeep;
+    });
+    const processContent = (content) => __async(this, null, function* () {
+      return Promise.all(content.map(resolveNode));
+    });
+    const dynamic = {
+      root: yield resolveNode(defaultedData.root),
+      content: yield processContent(defaultedData.content),
+      zones: {}
+    };
+    Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
+      const content = defaultedData.zones[zoneKey];
+      dynamic.zones[zoneKey] = yield processContent(content);
+    }), {});
+    return dynamic;
+  });
+}
+
+// lib/transform-props.ts
+init_react_import();
+function transformProps(data, propTransforms) {
+  const mapItem = (item) => {
+    if (propTransforms[item.type]) {
+      return __spreadProps(__spreadValues({}, item), {
+        props: propTransforms[item.type](item.props)
+      });
+    }
+    return item;
+  };
+  const defaultedData = defaultData(data);
+  const rootProps = defaultedData.root.props || defaultedData.root;
+  let newRoot = __spreadValues({}, defaultedData.root);
+  if (propTransforms["root"]) {
+    if (defaultedData.root.props) {
+      newRoot.props = propTransforms["root"](rootProps);
+    } else {
+      newRoot = propTransforms["root"](rootProps);
+    }
+  }
+  const afterPropTransforms = __spreadProps(__spreadValues({}, defaultedData), {
+    root: newRoot,
+    content: defaultedData.content.map(mapItem),
+    zones: Object.keys(data.zones || {}).reduce(
+      (acc, zoneKey) => __spreadProps(__spreadValues({}, acc), {
+        [zoneKey]: data.zones[zoneKey].map(mapItem)
+      }),
+      {}
+    )
+  });
+  return afterPropTransforms;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Render,
+  resolveAllData,
+  transformProps
+});
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/defaultAttributes.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/Icon.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/createLucideIcon.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/copy.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/corner-left-up.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/trash.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.468.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/