@measured/puck 0.21.0-canary.6dae6cb7 → 0.21.0-canary.74d9a160

package/dist/no-external.js

@@ -153,6 +153,42 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/fast-deep-equal/index.js"(exports2, module2) {
+    "use strict";
+    init_react_import();
+    module2.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
+
 // bundle/no-external.ts
 var no_external_exports = {};
 __export(no_external_exports, {
@@ -1661,7 +1697,9 @@ var keyCodeMap = {
   KeyW: "w",
   KeyX: "x",
   KeyY: "y",
-  KeyZ: "z"
+  KeyZ: "z",
+  Delete: "delete",
+  Backspace: "backspace"
 };
 var useHotkeyStore = (0, import_zustand.create)()(
   (0, import_middleware.subscribeWithSelector)((set) => ({
@@ -1685,8 +1723,10 @@ var monitorHotkeys = (doc) => {
           ([key2, value]) => value === !!combo[key2]
         );
         if (conditionMet) {
-          e.preventDefault();
-          cb();
+          const handled = cb(e);
+          if (handled !== false) {
+            e.preventDefault();
+          }
         }
       });
       if (key !== "meta" && key !== "ctrl" && key !== "shift") {
@@ -1709,6 +1749,10 @@ var monitorHotkeys = (doc) => {
       useHotkeyStore.getState().reset();
     }
   };
+  const onBlur = () => {
+    useHotkeyStore.getState().reset();
+  };
+  window.addEventListener("blur", onBlur);
   doc.addEventListener("keydown", onKeyDown);
   doc.addEventListener("keyup", onKeyUp);
   doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -1716,6 +1760,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1910,7 +1955,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -1918,13 +1963,13 @@ var flattenData = (state, config) => {
 
 // lib/get-changed.ts
 init_react_import();
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_fast_equals = require("fast-equals");
 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]: !(0, import_fast_deep_equal.default)(oldItemProps[item], newItemProps[item])
+      [item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
@@ -2145,7 +2190,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
 
 // lib/resolve-component-data.ts
 init_react_import();
-var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var import_fast_equals2 = require("fast-equals");
 var cache = { lastChange: {} };
 var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
   const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
@@ -2154,7 +2199,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && (0, import_fast_deep_equal2.default)(item, oldItem)) {
+    if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -2204,7 +2249,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !(0, import_fast_deep_equal2.default)(item, itemWithResolvedChildren)
+    didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
   };
 });
 
@@ -3750,11 +3795,13 @@ var ExternalInput = ({
   id,
   readOnly
 }) => {
+  var _a;
   const {
     mapProp = (val) => val,
     mapRow = (val) => val,
     filterFields
   } = field || {};
+  const { enabled: shouldCacheData } = (_a = field.cache) != null ? _a : { enabled: true };
   const [data, setData] = (0, import_react17.useState)([]);
   const [isOpen, setOpen] = (0, import_react17.useState)(false);
   const [isLoading, setIsLoading] = (0, import_react17.useState)(true);
@@ -3780,11 +3827,18 @@ var ExternalInput = ({
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
-      const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
+      let listData;
+      if (shouldCacheData && dataCache[cacheKey]) {
+        listData = dataCache[cacheKey];
+      } else {
+        listData = yield field.fetchList({ query, filters: filters2 });
+      }
       if (listData) {
         setData(listData);
         setIsLoading(false);
-        dataCache[cacheKey] = listData;
+        if (shouldCacheData) {
+          dataCache[cacheKey] = listData;
+        }
       }
     }),
     [id, field]
@@ -3848,6 +3902,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -4751,12 +4806,14 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
+  const [, setRerender] = (0, import_react24.useState)(0);
   const ref = (0, import_react24.useRef)(null);
   const refSetter = (0, import_react24.useCallback)(
     (el) => {
       sortableRef(el);
-      if (el) {
+      if (ref.current !== el) {
         ref.current = el;
+        setRerender((update) => update + 1);
       }
     },
     [sortableRef]
@@ -5531,26 +5588,26 @@ var registerOverlayPortal = (el, opts = {}) => {
       capture: true
     });
   };
-  if (disableDragOnFocus) {
-    el.addEventListener("focus", onFocus, { capture: true });
-    el.addEventListener("blur", onBlur, { capture: true });
-  } else if (disableDrag) {
+  if (disableDrag) {
     el.addEventListener("pointerdown", stopPropagation, {
       capture: true
     });
+  } else if (disableDragOnFocus) {
+    el.addEventListener("focus", onFocus, { capture: true });
+    el.addEventListener("blur", onBlur, { capture: true });
   }
   el.setAttribute("data-puck-overlay-portal", "true");
   return () => {
     el.removeEventListener("mouseover", stopPropagation, {
       capture: true
     });
-    if (disableDragOnFocus) {
-      el.removeEventListener("focus", onFocus, { capture: true });
-      el.removeEventListener("blur", onFocus, { capture: true });
-    } else if (disableDrag) {
+    if (disableDrag) {
       el.removeEventListener("pointerdown", stopPropagation, {
         capture: true
       });
+    } else if (disableDragOnFocus) {
+      el.removeEventListener("focus", onFocus, { capture: true });
+      el.removeEventListener("blur", onBlur, { capture: true });
     }
     el.removeAttribute("data-puck-overlay-portal");
   };
@@ -5558,7 +5615,7 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -7048,7 +7105,7 @@ Drawer.Item = DrawerItem;
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -8586,9 +8643,70 @@ var usePreviewModeHotkeys = () => {
   useHotkey({ ctrl: true, i: true }, toggleInteractive);
 };
 
-// lib/use-puck.ts
+// lib/use-delete-hotkeys.ts
 init_react_import();
 var import_react55 = require("react");
+var isElementVisible = (element) => {
+  let current = element;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("hidden")) {
+      return false;
+    }
+    current = current.parentElement;
+  }
+  return true;
+};
+var shouldBlockDeleteHotkey = (e) => {
+  var _a;
+  if (e == null ? void 0 : e.defaultPrevented) return true;
+  const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
+  if (origin instanceof HTMLElement) {
+    const tag = origin.tagName.toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") return true;
+    if (origin.isContentEditable) return true;
+    const role = origin.getAttribute("role");
+    if (role === "textbox" || role === "combobox" || role === "searchbox" || role === "listbox" || role === "grid") {
+      return true;
+    }
+  }
+  const modal = document.querySelector(
+    'dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]'
+  );
+  if (modal && isElementVisible(modal)) {
+    return true;
+  }
+  return false;
+};
+var useDeleteHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const deleteSelectedComponent = (0, import_react55.useCallback)(
+    (e) => {
+      var _a;
+      if (shouldBlockDeleteHotkey(e)) {
+        return false;
+      }
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return true;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ delete: true }, deleteSelectedComponent);
+  useHotkey({ backspace: true }, deleteSelectedComponent);
+};
+
+// lib/use-puck.ts
+init_react_import();
+var import_react56 = require("react");
 var import_zustand6 = require("zustand");
 var generateUsePuck = (store) => {
   const history = {
@@ -8615,7 +8733,7 @@ var generateUsePuck = (store) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react55.createContext)(
+var UsePuckStoreContext = (0, import_react56.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -8629,12 +8747,12 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
-  const [usePuckStore] = (0, import_react55.useState)(
+  const [usePuckStore] = (0, import_react56.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUsePuck(convertToPickedStore(appStore.getState()))
     )
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -8646,7 +8764,7 @@ var useRegisterUsePuckStore = (appStore) => {
 };
 function createUsePuck() {
   return function usePuck2(selector) {
-    const usePuckApi = (0, import_react55.useContext)(UsePuckStoreContext);
+    const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
     if (!usePuckApi) {
       throw new Error("usePuck must be used inside <Puck>.");
     }
@@ -8658,7 +8776,7 @@ function createUsePuck() {
   };
 }
 function usePuck() {
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     console.warn(
       "You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
     );
@@ -8666,7 +8784,7 @@ function usePuck() {
   return createUsePuck()((s) => s);
 }
 function useGetPuck() {
-  const usePuckApi = (0, import_react55.useContext)(UsePuckStoreContext);
+  const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
   if (!usePuckApi) {
     throw new Error("usePuckGet must be used inside <Puck>.");
   }
@@ -8674,11 +8792,11 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -8760,7 +8878,7 @@ var HeaderInner = () => {
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react56.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react57.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -8775,7 +8893,7 @@ var HeaderInner = () => {
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = (0, import_react56.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react57.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -8795,7 +8913,7 @@ var HeaderInner = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react56.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react57.useState)(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -8805,7 +8923,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = (0, import_react56.useCallback)(
+  const toggleSidebars = (0, import_react57.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -8908,14 +9026,14 @@ var HeaderInner = () => {
     }
   );
 };
-var Header = (0, import_react56.memo)(HeaderInner);
+var Header = (0, import_react57.memo)(HeaderInner);
 
 // components/Puck/components/Sidebar/index.tsx
 init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
@@ -8932,11 +9050,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react57.useRef)(null);
-  const isDragging = (0, import_react57.useRef)(false);
-  const startX = (0, import_react57.useRef)(0);
-  const startWidth = (0, import_react57.useRef)(0);
-  const handleMouseMove = (0, import_react57.useCallback)(
+  const handleRef = (0, import_react58.useRef)(null);
+  const isDragging = (0, import_react58.useRef)(false);
+  const startX = (0, import_react58.useRef)(0);
+  const startWidth = (0, import_react58.useRef)(0);
+  const handleMouseMove = (0, import_react58.useCallback)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -8947,7 +9065,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react57.useCallback)(() => {
+  const handleMouseUp = (0, import_react58.useCallback)(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8963,7 +9081,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = (0, import_react57.useCallback)(
+  const handleMouseDown = (0, import_react58.useCallback)(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -9023,14 +9141,14 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react58 = require("react");
+var import_react59 = require("react");
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react58.useState)(null);
-  const sidebarRef = (0, import_react58.useRef)(null);
+  const [width, setWidth] = (0, import_react59.useState)(null);
+  const sidebarRef = (0, import_react59.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("puck-sidebar-widths");
@@ -9055,12 +9173,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react58.useCallback)(
+  const handleResizeEnd = (0, import_react59.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -9102,6 +9220,15 @@ function useSidebarResize(position, dispatch) {
   };
 }
 
+// lib/data/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"
+  });
+};
+
 // components/Puck/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("Puck", styles_module_default15);
@@ -9115,11 +9242,11 @@ var FieldSideBar = () => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fields, {}) });
 };
-var propsContext = (0, import_react59.createContext)({});
+var propsContext = (0, import_react60.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react59.useContext)(propsContext);
+var usePropsContext = () => (0, import_react60.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -9136,14 +9263,14 @@ function PuckProvider({ children }) {
     onAction,
     fieldTransforms
   } = usePropsContext();
-  const iframe = (0, import_react59.useMemo)(
+  const iframe = (0, import_react60.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react59.useState)(() => {
+  const [generatedAppState] = (0, import_react60.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -9178,9 +9305,13 @@ function PuckProvider({ children }) {
     }
     const rootProps = ((_h = initialData == null ? void 0 : initialData.root) == null ? void 0 : _h.props) || (initialData == null ? void 0 : initialData.root) || {};
     const defaultedRootProps = __spreadValues(__spreadValues({}, (_i = config.root) == null ? void 0 : _i.defaultProps), rootProps);
+    const root = populateIds(
+      toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
+      config
+    );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
       data: __spreadProps(__spreadValues({}, initialData), {
-        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps }),
+        root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
         content: initialData.content || []
       }),
       ui: __spreadProps(__spreadValues(__spreadValues({}, initial), clientUiState), {
@@ -9203,7 +9334,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react59.useState)(
+  const [blendedHistories] = (0, import_react60.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -9223,7 +9354,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react59.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react60.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -9231,7 +9362,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = (0, import_react59.useCallback)(
+  const generateAppStore = (0, import_react60.useCallback)(
     (state) => {
       return {
         state,
@@ -9257,15 +9388,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react59.useState)(
+  const [appStore] = (0, import_react60.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -9274,13 +9405,13 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react59.useRef)(null);
-  (0, import_react59.useEffect)(() => {
+  const previousData = (0, import_react60.useRef)(null);
+  (0, import_react60.useEffect)(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal3.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
@@ -9289,7 +9420,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -9301,7 +9432,7 @@ function PuckLayout({ children }) {
     dnd,
     initialHistory: _initialHistory
   } = usePropsContext();
-  const iframe = (0, import_react59.useMemo)(
+  const iframe = (0, import_react60.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -9326,7 +9457,7 @@ function PuckLayout({ children }) {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -9350,17 +9481,18 @@ function PuckLayout({ children }) {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react59.useMemo)(
+  const CustomPuck = (0, import_react60.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react59.useState)(false);
-  (0, import_react59.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react60.useState)(false);
+  (0, import_react60.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react59.useEffect)(() => {
+  useDeleteHotkeys();
+  (0, import_react60.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -9598,17 +9730,6 @@ function transformProps(data, propTransforms, config = { components: {} }) {
 
 // lib/resolve-all-data.ts
 init_react_import();
-
-// lib/data/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;