@measured/puck 0.20.3-canary.d855fa8c → 0.21.0-canary.15fe8d60

package/dist/{chunk-QIGVND56.mjs → chunk-JB4ZAK5S.mjs}

@@ -19,12 +19,13 @@ import {
   rootDroppableId,
   rootZone,
   setupZone,
+  toComponent,
   useFieldTransforms,
   useSlots,
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-OOLYDXKW.mjs";
+} from "./chunk-TC25DCTQ.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -88,6 +89,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"(exports, module) {
+    "use strict";
+    init_react_import();
+    module.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;
+    };
+  }
+});
+
 // types/API/Overrides.ts
 init_react_import();
 var overrideKeys = [
@@ -768,7 +805,9 @@ var keyCodeMap = {
   KeyW: "w",
   KeyX: "x",
   KeyY: "y",
-  KeyZ: "z"
+  KeyZ: "z",
+  Delete: "delete",
+  Backspace: "backspace"
 };
 var useHotkeyStore = create()(
   subscribeWithSelector((set) => ({
@@ -792,8 +831,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") {
@@ -816,6 +857,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);
@@ -823,6 +868,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1017,7 +1063,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -1025,10 +1071,10 @@ var flattenData = (state, config) => {
 
 // store/slices/permissions.ts
 var createPermissionsSlice = (set, get) => {
-  const resolvePermissions = (..._0) => __async(void 0, [..._0], function* (params = {}, force) {
+  const resolvePermissions = (..._0) => __async(null, [..._0], function* (params = {}, force) {
     const { state, permissions, config } = get();
     const { cache, globalPermissions } = permissions;
-    const resolveDataForItem = (item2, force2 = false) => __async(void 0, null, function* () {
+    const resolveDataForItem = (item2, force2 = false) => __async(null, null, function* () {
       var _a, _b, _c;
       const { config: config2, state: appState, setComponentLoading } = get();
       const componentConfig = item2.type === "root" ? config2.root : config2.components[item2.type];
@@ -1083,13 +1129,13 @@ var createPermissionsSlice = (set, get) => {
     if (item) {
       yield resolveDataForItem(item, force);
     } else if (type) {
-      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).filter((item2) => item2.type === type).map((item2) => __async(null, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     } else if (root) {
       resolveDataForRoot(force);
     } else {
-      flattenData(state, config).map((item2) => __async(void 0, null, function* () {
+      flattenData(state, config).map((item2) => __async(null, null, function* () {
         yield resolveDataForItem(item2, force);
       }));
     }
@@ -1170,9 +1216,10 @@ var createFieldsSlice = (_set, _get) => {
 };
 var useRegisterFieldsSlice = (appStore, id) => {
   const resolveFields = useCallback(
-    (reset) => __async(void 0, null, function* () {
+    (reset) => __async(null, null, function* () {
       var _a, _b;
       const { fields, lastResolvedData } = appStore.getState().fields;
+      const metadata = appStore.getState().metadata;
       const nodes = appStore.getState().state.indexes.nodes;
       const node = nodes[id || "root"];
       const componentData = node == null ? void 0 : node.data;
@@ -1202,6 +1249,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           changed,
           fields: defaultFields2,
           lastFields,
+          metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
           lastData,
           appState: makeStatePublic(state),
           parent
@@ -1368,7 +1416,7 @@ var createAppStore = (initialAppStore) => create2()(
         const selectedItem = state.ui.itemSelector ? getItem(state.ui.itemSelector, state) : null;
         return __spreadProps(__spreadValues({}, s), { state, selectedItem });
       }),
-      resolveComponentData: (componentData, trigger) => __async(void 0, null, function* () {
+      resolveComponentData: (componentData, trigger) => __async(null, null, function* () {
         const { config, metadata, setComponentLoading, permissions } = get();
         const timeouts = {};
         return yield resolveComponentData(
@@ -1379,7 +1427,7 @@ var createAppStore = (initialAppStore) => create2()(
             const id = "id" in item.props ? item.props.id : "root";
             timeouts[id] = setComponentLoading(id, true, 50);
           },
-          (item) => __async(void 0, null, function* () {
+          (item) => __async(null, null, function* () {
             const id = "id" in item.props ? item.props.id : "root";
             if ("type" in item) {
               yield permissions.refreshPermissions({ item });
@@ -1391,7 +1439,7 @@ var createAppStore = (initialAppStore) => create2()(
           trigger
         );
       }),
-      resolveAndCommitData: () => __async(void 0, null, function* () {
+      resolveAndCommitData: () => __async(null, null, function* () {
         const { config, state, dispatch, resolveComponentData: resolveComponentData2 } = get();
         walkAppState(
           state,
@@ -2412,7 +2460,7 @@ var collisionStore = createStore(() => ({
 
 // lib/dnd/collision/dynamic/index.ts
 var flushNext = "";
-var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input) => {
+var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((input) => {
   var _a, _b, _c, _d, _e;
   const { dragOperation, droppable } = input;
   const { position } = dragOperation;
@@ -2505,7 +2553,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => (input
   }
   collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
   return null;
-};
+});
 
 // components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
@@ -2938,8 +2986,9 @@ var ArrayField = ({
                       var _a;
                       if (isDraggingAny) return;
                       const existingValue = value || [];
+                      const defaultProps = typeof field.defaultItemProps === "function" ? field.defaultItemProps(existingValue.length) : (_a = field.defaultItemProps) != null ? _a : {};
                       const newItem = defaultSlots(
-                        uniqifyItem((_a = field.defaultItemProps) != null ? _a : {}),
+                        uniqifyItem(defaultProps),
                         field.arrayFields
                       );
                       const newValue = [...existingValue, newItem];
@@ -3114,11 +3163,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] = useState6([]);
   const [isOpen, setOpen] = useState6(false);
   const [isLoading, setIsLoading] = useState6(true);
@@ -3141,14 +3192,21 @@ var ExternalInput = ({
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState6(field.initialQuery || "");
   const search = useCallback3(
-    (query, filters2) => __async(void 0, null, function* () {
+    (query, filters2) => __async(null, 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]
@@ -3212,6 +3270,7 @@ var ExternalInput = ({
             }),
             onSubmit: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               search(searchQuery, filters);
             },
             children: [
@@ -3359,7 +3418,7 @@ var ExternalField = ({
             placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
             mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
             mapRow: validField.mapRow,
-            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
+            fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(null, null, function* () {
               return yield deprecatedField.adaptor.fetchList(
                 deprecatedField.adaptorParams
               );
@@ -4122,12 +4181,14 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
+  const [, setRerender] = useState10(0);
   const ref = useRef2(null);
   const refSetter = useCallback7(
     (el) => {
       sortableRef(el);
-      if (el) {
+      if (ref.current !== el) {
         ref.current = el;
+        setRerender((update) => update + 1);
       }
     },
     [sortableRef]
@@ -4782,7 +4843,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
 
 // lib/insert-component.ts
 init_react_import();
-var insertComponent = (componentType, zone, index, appStore) => __async(void 0, null, function* () {
+var insertComponent = (componentType, zone, index, appStore) => __async(null, null, function* () {
   const id = generateId(componentType);
   const insertActionData = {
     type: "insert",
@@ -5466,7 +5527,7 @@ import { useCallback as useCallback9 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
   return useCallback9(
-    (...args) => __async(this, null, function* () {
+    (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
     }),
@@ -5632,26 +5693,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");
   };
@@ -5659,7 +5720,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();
@@ -5733,7 +5794,7 @@ var InlineTextFieldInternal = ({
         ref.current.replaceChildren(value);
       }
       const cleanupPortal = registerOverlayPortal(ref.current);
-      const handleInput = (e) => __async(void 0, null, function* () {
+      const handleInput = (e) => __async(null, null, function* () {
         var _a2;
         const appStore2 = appStoreApi.getState();
         const node = appStore2.state.indexes.nodes[componentId];
@@ -6394,7 +6455,7 @@ function createUsePuck() {
     }
     const result = useStore3(
       usePuckApi,
-      selector != null ? selector : (s) => s
+      selector != null ? selector : ((s) => s)
     );
     return result;
   };
@@ -6419,7 +6480,7 @@ function useGetPuck() {
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext13,
   useEffect as useEffect29,
   useMemo as useMemo20,
@@ -6541,7 +6602,7 @@ var DefaultFields = ({
 }) => {
   return /* @__PURE__ */ jsx29(Fragment8, { children });
 };
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(void 0, null, function* () {
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   let currentProps;
   const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
   const { data, ui } = state;
@@ -6915,7 +6976,7 @@ var CopyHostStyles = ({
     let elements = [];
     const hashes = {};
     const lookupEl = (el) => elements.findIndex((elementMap) => elementMap.original === el);
-    const mirrorEl = (el, inlineStyles = false) => __async(void 0, null, function* () {
+    const mirrorEl = (el, inlineStyles = false) => __async(null, null, function* () {
       let mirror;
       if (el.nodeName === "LINK" && inlineStyles) {
         mirror = document.createElement("style");
@@ -6947,7 +7008,7 @@ var CopyHostStyles = ({
       }
       return mirror;
     });
-    const addEl = (el) => __async(void 0, null, function* () {
+    const addEl = (el) => __async(null, null, function* () {
       const index = lookupEl(el);
       if (index > -1) {
         if (debug)
@@ -7020,7 +7081,7 @@ var CopyHostStyles = ({
     const parentBody = parentDocument.getElementsByTagName("body")[0];
     syncAttributes(parentBody, doc.body);
     Promise.all(
-      collectedStyles.map((styleNode, i) => __async(void 0, null, function* () {
+      collectedStyles.map((styleNode, i) => __async(null, null, function* () {
         if (styleNode.nodeName === "LINK") {
           const linkHref = styleNode.href;
           if (hrefs.indexOf(linkHref) > -1) {
@@ -7979,12 +8040,73 @@ var usePreviewModeHotkeys = () => {
   useHotkey({ ctrl: true, i: true }, toggleInteractive);
 };
 
+// lib/use-delete-hotkeys.ts
+init_react_import();
+import { useCallback as useCallback17 } from "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 = useCallback17(
+    (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);
+};
+
 // components/Puck/index.tsx
-import fdeq from "fast-deep-equal";
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo4, useCallback as useCallback17, useMemo as useMemo19, useState as useState23 } from "react";
+import { memo as memo4, useCallback as useCallback18, useMemo as useMemo19, useState as useState23 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -8111,7 +8233,7 @@ var HeaderInner = () => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback17(
+  const toggleSidebars = useCallback18(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -8221,7 +8343,7 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback18, useRef as useRef10 } from "react";
+import { useCallback as useCallback19, useRef as useRef10 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
@@ -8242,7 +8364,7 @@ var ResizeHandle = ({
   const isDragging = useRef10(false);
   const startX = useRef10(0);
   const startWidth = useRef10(0);
-  const handleMouseMove = useCallback18(
+  const handleMouseMove = useCallback19(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -8253,7 +8375,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback18(() => {
+  const handleMouseUp = useCallback19(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8269,7 +8391,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback18(
+  const handleMouseDown = useCallback19(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8329,7 +8451,7 @@ var Sidebar = ({
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback19, useEffect as useEffect28, useRef as useRef11, useState as useState24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect28, useRef as useRef11, useState as useState24 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState24(null);
   const sidebarRef = useRef11(null);
@@ -8366,7 +8488,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback20(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8484,9 +8606,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), {
@@ -8537,7 +8663,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = useCallback20(
+  const generateAppStore = useCallback21(
     (state) => {
       return {
         state,
@@ -8582,17 +8708,17 @@ function PuckProvider({ children }) {
   });
   const previousData = useRef12(null);
   useEffect29(() => {
-    appStore.subscribe(
+    return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if (fdeq(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
       }
     );
-  }, []);
+  }, [onChange]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
   useEffect29(() => {
@@ -8666,6 +8792,7 @@ function PuckLayout({ children }) {
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
+  useDeleteHotkeys();
   useEffect29(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
@@ -8807,269 +8934,38 @@ classnames/index.js:
   *)
 
 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/chevron-down.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/chevron-right.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/chevron-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/circle-check-big.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 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/ellipsis-vertical.js:
-  (**
-   * @license lucide-react v0.468.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
 lucide-react/dist/esm/icons/globe.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/hash.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/layers.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/layout-grid.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/link.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/list.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/lock-open.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/lock.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/monitor.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/panel-left.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/panel-right.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/plus.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/redo-2.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/search.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/sliders-horizontal.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/smartphone.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/tablet.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/icons/type.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/undo-2.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/zoom-in.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/zoom-out.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