@measured/puck 0.20.3-canary.b1a38875 → 0.21.0-canary.20aafb6a

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

@@ -768,7 +768,9 @@ var keyCodeMap = {
   KeyW: "w",
   KeyX: "x",
   KeyY: "y",
-  KeyZ: "z"
+  KeyZ: "z",
+  Delete: "delete",
+  Backspace: "backspace"
 };
 var useHotkeyStore = create()(
   subscribeWithSelector((set) => ({
@@ -792,8 +794,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") {
@@ -1173,6 +1177,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
     (reset) => __async(void 0, 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 +1207,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           changed,
           fields: defaultFields2,
           lastFields,
+          metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
           lastData,
           appState: makeStatePublic(state),
           parent
@@ -6419,7 +6425,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,
@@ -7979,12 +7985,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";
 
 // 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 +8178,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 +8288,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 +8309,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 +8320,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback18(() => {
+  const handleMouseUp = useCallback19(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8269,7 +8336,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback18(
+  const handleMouseDown = useCallback19(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8329,7 +8396,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 +8433,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback20(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8537,7 +8604,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = useCallback20(
+  const generateAppStore = useCallback21(
     (state) => {
       return {
         state,
@@ -8666,6 +8733,7 @@ function PuckLayout({ children }) {
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
+  useDeleteHotkeys();
   useEffect29(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-JdJYB16L.mjs';
-export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.mjs';
+import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-Ctf3FZQI.mjs';
+export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-JdJYB16L.js';
-export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.js';
+import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-Ctf3FZQI.js';
+export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';

package/dist/index.js

@@ -1661,7 +1661,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 +1687,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") {
@@ -2079,6 +2083,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
     (reset) => __async(void 0, 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;
@@ -2108,6 +2113,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           changed,
           fields: defaultFields2,
           lastFields,
+          metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
           lastData,
           appState: makeStatePublic(state),
           parent
@@ -7046,7 +7052,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();
@@ -8584,9 +8590,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 = {
@@ -8613,7 +8680,7 @@ var generateUsePuck = (store) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react55.createContext)(
+var UsePuckStoreContext = (0, import_react56.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -8627,12 +8694,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) => {
@@ -8644,7 +8711,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>.");
     }
@@ -8656,7 +8723,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."
     );
@@ -8664,7 +8731,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>.");
   }
@@ -8676,7 +8743,7 @@ var import_fast_deep_equal3 = __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();
@@ -8758,7 +8825,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"
@@ -8773,7 +8840,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."
@@ -8793,7 +8860,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;
@@ -8803,7 +8870,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;
@@ -8906,14 +8973,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();
@@ -8930,11 +8997,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;
@@ -8945,7 +9012,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;
@@ -8961,7 +9028,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;
@@ -9021,14 +9088,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");
@@ -9053,12 +9120,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",
@@ -9113,11 +9180,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,
@@ -9134,14 +9201,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 = {};
@@ -9201,7 +9268,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 }] : []
@@ -9221,7 +9288,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),
@@ -9229,7 +9296,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,
@@ -9255,15 +9322,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]);
@@ -9272,8 +9339,8 @@ 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) => {
@@ -9287,7 +9354,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -9299,7 +9366,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
@@ -9324,7 +9391,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",
@@ -9348,17 +9415,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) {

package/dist/index.mjs

@@ -18,7 +18,7 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-QIGVND56.mjs";
+} from "./chunk-MSKEXIWC.mjs";
 import {
   init_react_import,
   migrate,

package/dist/no-external.d.mts

@@ -1,4 +1,4 @@
-export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.mjs';
+export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
 export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.mjs';
 import 'react';
 import 'react/jsx-runtime';

package/dist/no-external.d.ts

@@ -1,4 +1,4 @@
-export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.js';
+export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
 export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/no-external.js

@@ -1661,7 +1661,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 +1687,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") {
@@ -2079,6 +2083,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
     (reset) => __async(void 0, 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;
@@ -2108,6 +2113,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           changed,
           fields: defaultFields2,
           lastFields,
+          metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
           lastData,
           appState: makeStatePublic(state),
           parent
@@ -7046,7 +7052,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();
@@ -8584,9 +8590,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 = {
@@ -8613,7 +8680,7 @@ var generateUsePuck = (store) => {
   };
   return storeData;
 };
-var UsePuckStoreContext = (0, import_react55.createContext)(
+var UsePuckStoreContext = (0, import_react56.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -8627,12 +8694,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) => {
@@ -8644,7 +8711,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>.");
     }
@@ -8656,7 +8723,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."
     );
@@ -8664,7 +8731,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>.");
   }
@@ -8676,7 +8743,7 @@ var import_fast_deep_equal3 = __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();
@@ -8758,7 +8825,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"
@@ -8773,7 +8840,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."
@@ -8793,7 +8860,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;
@@ -8803,7 +8870,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;
@@ -8906,14 +8973,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();
@@ -8930,11 +8997,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;
@@ -8945,7 +9012,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;
@@ -8961,7 +9028,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;
@@ -9021,14 +9088,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");
@@ -9053,12 +9120,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",
@@ -9113,11 +9180,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,
@@ -9134,14 +9201,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 = {};
@@ -9201,7 +9268,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 }] : []
@@ -9221,7 +9288,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),
@@ -9229,7 +9296,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,
@@ -9255,15 +9322,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]);
@@ -9272,8 +9339,8 @@ 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) => {
@@ -9287,7 +9354,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);
@@ -9299,7 +9366,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
@@ -9324,7 +9391,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",
@@ -9348,17 +9415,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) {

package/dist/no-external.mjs

@@ -18,7 +18,7 @@ import {
   setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-QIGVND56.mjs";
+} from "./chunk-MSKEXIWC.mjs";
 import {
   init_react_import,
   migrate,

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-JdJYB16L.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.mjs';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-Ctf3FZQI.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-JdJYB16L.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-JdJYB16L.js';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-Ctf3FZQI.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/{walk-tree-JdJYB16L.d.mts → walk-tree-Ctf3FZQI.d.mts}

@@ -212,6 +212,7 @@ UserField extends BaseField = {}> = {
         fields: Fields<FieldProps>;
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
+        metadata: Metadata;
         appState: AppState;
         parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;

package/dist/{walk-tree-JdJYB16L.d.ts → walk-tree-Ctf3FZQI.d.ts}

@@ -212,6 +212,7 @@ UserField extends BaseField = {}> = {
         fields: Fields<FieldProps>;
         lastFields: Fields<FieldProps>;
         lastData: DataShape | null;
+        metadata: Metadata;
         appState: AppState;
         parent: ComponentData | null;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.20.3-canary.b1a38875",
+  "version": "0.21.0-canary.20aafb6a",
   "description": "The open-source visual editor for React",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",