@measured/puck 0.21.0-canary.5c9698fb → 0.21.0-canary.8db6528d

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, {
@@ -832,34 +868,39 @@ var walkField = ({
   config,
   recurseSlots = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const fieldType = (_a = fields[propKey]) == null ? void 0 : _a.type;
   const map = mappers[fieldType];
   if (map && fieldType === "slot") {
     const content = value || [];
-    const mappedContent = recurseSlots ? content.map((el) => {
-      var _a2;
-      const componentConfig = config.components[el.type];
-      if (!componentConfig) {
-        throw new Error(`Could not find component config for ${el.type}`);
+    let mappedContent = content;
+    if (recurseSlots) {
+      for (let i = 0; i < content.length; i++) {
+        const el = content[i];
+        const componentConfig = config.components[el.type];
+        if (!componentConfig || !el.props) {
+          continue;
+        }
+        const fields2 = (_b = componentConfig.fields) != null ? _b : {};
+        mappedContent.push(
+          walkField({
+            value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
+            fields: fields2,
+            mappers,
+            id: el.props.id,
+            config,
+            recurseSlots
+          })
+        );
       }
-      const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
-      return walkField({
-        value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
-        fields: fields2,
-        mappers,
-        id: el.props.id,
-        config,
-        recurseSlots
-      });
-    }) : content;
+    }
     if (containsPromise(mappedContent)) {
       return Promise.all(mappedContent);
     }
     return map({
       value: mappedContent,
       parentId: id,
-      propName: propKey,
+      propName: propPath,
       field: fields[propKey],
       propPath
     });
@@ -874,7 +915,7 @@ var walkField = ({
   }
   if (value && typeof value === "object") {
     if (Array.isArray(value)) {
-      const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
+      const arrayFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "array" ? fields[propKey].arrayFields : null;
       if (!arrayFields) return value;
       const newValue = value.map(
         (el, idx) => walkField({
@@ -895,7 +936,7 @@ var walkField = ({
     } else if ("$$typeof" in value) {
       return value;
     } else {
-      const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
+      const objectFields = ((_d = fields[propKey]) == null ? void 0 : _d.type) === "object" ? fields[propKey].objectFields : fields;
       return walkObject({
         value,
         fields: objectFields,
@@ -1730,7 +1771,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) => ({
@@ -1754,8 +1797,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") {
@@ -1979,7 +2024,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -1987,13 +2032,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])
     });
   }, {}) : {};
 };
@@ -2148,6 +2193,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;
@@ -2177,6 +2223,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
           changed,
           fields: defaultFields2,
           lastFields,
+          metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
           lastData,
           appState: makeStatePublic(state),
           parent
@@ -2212,7 +2259,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;
@@ -2221,7 +2268,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 (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);
@@ -2271,7 +2318,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)
   };
 });
 
@@ -3219,8 +3266,7 @@ var NestedFieldProvider = ({
   name,
   subName,
   wildcardName = name,
-  readOnlyFields,
-  value
+  readOnlyFields
 }) => {
   const subPath = `${name}.${subName}`;
   const wildcardSubPath = `${wildcardName}.${subName}`;
@@ -3243,7 +3289,7 @@ var NestedFieldProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     NestedFieldContext.Provider,
     {
-      value: { readOnlyFields: subReadOnlyFields, localName: subName, value },
+      value: { readOnlyFields: subReadOnlyFields, localName: subName },
       children
     }
   );
@@ -3276,15 +3322,16 @@ var SubFieldInternal = ({
   subName,
   localName,
   onChange,
-  forceReadOnly
+  forceReadOnly,
+  value
 }) => {
   const indexName = typeof index !== "undefined" ? `${name}[${index}]` : name;
-  const subPath = `${indexName}.${subName}`;
+  const subPath = name ? `${indexName}.${subName}` : subName;
   const localIndexName = typeof index !== "undefined" ? `${localName}[${index}]` : localName != null ? localName : subName;
   const localWildcardName = typeof index !== "undefined" ? `${localName}[*]` : localName;
   const localSubPath = `${localIndexName}.${subName}`;
   const localWildcardSubPath = `${localWildcardName}.${subName}`;
-  const { readOnlyFields, value } = useNestedFieldContext();
+  const { readOnlyFields } = useNestedFieldContext();
   const subReadOnly = forceReadOnly ? forceReadOnly : typeof readOnlyFields[subPath] !== "undefined" ? readOnlyFields[localSubPath] : readOnlyFields[localWildcardSubPath];
   const label = field.label || subName;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -3308,7 +3355,6 @@ var SubFieldInternal = ({
           onChange: (val, ui) => {
             onChange(val, ui, subName);
           },
-          provideValue: typeof value !== "undefined",
           value: typeof value !== "undefined" ? getDeep(value, subPath) : void 0
         }
       )
@@ -3319,7 +3365,7 @@ var SubFieldInternal = ({
 var SubField = (0, import_react14.memo)(SubFieldInternal);
 
 // components/AutoField/fields/ArrayField/index.tsx
-var import_fast_deep_equal3 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
@@ -3336,14 +3382,15 @@ var ArrayFieldItemInternal = ({
   actions,
   name,
   localName,
-  getValue
+  getValue,
+  value
 }) => {
   const isExpanded = useAppStore((s) => {
     var _a;
     return ((_a = s.state.ui.arrayState[arrayId]) == null ? void 0 : _a.openId) === id;
   });
   const itemSummary = useAppStore(() => {
-    const data = getValue();
+    const data = value != null ? value : getValue();
     if (data && field.getItemSummary) {
       return field.getItemSummary(data, index);
     }
@@ -3394,7 +3441,8 @@ var ArrayFieldItemInternal = ({
               index,
               field: subField,
               onChange,
-              forceReadOnly: !canEdit
+              forceReadOnly: !canEdit,
+              value: value == null ? void 0 : value[index]
             },
             subName
           );
@@ -3419,16 +3467,19 @@ var ArrayField = ({
   const appStoreApi = useAppStoreApi();
   const { localName = name } = useNestedFieldContext();
   const getValue = (0, import_react15.useCallback)(() => {
-    var _a;
+    var _a, _b;
     if (typeof value !== "undefined") return value;
     const { selectedItem } = appStoreApi.getState();
     const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
-    return name ? getDeep(props, name) : [];
+    return name ? (_b = getDeep(props, name)) != null ? _b : [] : [];
   }, [appStoreApi, name, value]);
   const getArrayState = (0, import_react15.useCallback)(() => {
+    var _a;
     const { state } = appStoreApi.getState();
+    const thisState = state.ui.arrayState[id];
+    if ((_a = thisState == null ? void 0 : thisState.items) == null ? void 0 : _a.length) return thisState;
     const value2 = getValue();
-    return state.ui.arrayState[id] || {
+    return {
       items: Array.from(value2 || []).map((item, idx) => {
         return {
           _originalIndex: idx,
@@ -3438,11 +3489,12 @@ var ArrayField = ({
       }),
       openId: ""
     };
-  }, [appStoreApi]);
+  }, [appStoreApi, id, getValue]);
   const numItems = useAppStore((s) => {
     var _a, _b;
-    const value2 = name ? (_b = (_a = appStoreApi.getState().selectedItem) == null ? void 0 : _a.props[name]) != null ? _b : [] : [];
-    return value2.length;
+    const { selectedItem } = s;
+    const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
+    return (name ? (_b = getDeep(props, name)) != null ? _b : [] : []).length;
   });
   const [mirror, setLocalState] = (0, import_react15.useState)(getArrayState());
   const appStore = useAppStoreApi();
@@ -3530,7 +3582,25 @@ var ArrayField = ({
     },
     [regenerateArrayState, setUi, mapArrayStateToUi, onChange, setLocalState]
   );
+  const reset = (0, import_react15.useCallback)(
+    (value2) => {
+      valueRef.current = value2;
+      const newArrayState = regenerateArrayState(valueRef.current);
+      if (!(0, import_fast_deep_equal.default)(newArrayState, getArrayState())) {
+        setUi(mapArrayStateToUi(newArrayState), false);
+        setLocalState(newArrayState);
+      }
+    },
+    [
+      regenerateArrayState,
+      mapArrayStateToUi,
+      setUi,
+      setLocalState,
+      getArrayState
+    ]
+  );
   (0, import_react15.useEffect)(() => {
+    if (value) return;
     return appStoreApi.subscribe(
       ({ selectedItem }) => {
         var _a;
@@ -3538,15 +3608,15 @@ var ArrayField = ({
         return name ? getDeep(props, name) : [];
       },
       (val) => {
-        if (!(0, import_fast_deep_equal3.default)(val, valueRef.current)) {
-          valueRef.current = val;
-          const newArrayState = regenerateArrayState(valueRef.current);
-          setUi(mapArrayStateToUi(newArrayState), false);
-          setLocalState(newArrayState);
+        if (!(0, import_fast_deep_equal.default)(val, valueRef.current)) {
+          reset(val);
         }
       }
     );
-  }, [appStoreApi]);
+  }, [appStoreApi, name, value]);
+  (0, import_react15.useEffect)(() => {
+    reset(getValue());
+  }, [reset, getValue, name]);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -3620,6 +3690,7 @@ var ArrayField = ({
                       field,
                       name,
                       localName,
+                      value,
                       getValue: () => {
                         const value2 = getValue();
                         return value2[_currentIndex];
@@ -4108,7 +4179,6 @@ var ExternalInput = ({
                           id: `external_field_${fieldName}_filter`,
                           label: filterField.label || fieldName,
                           value: filters[fieldName],
-                          provideValue: true,
                           onChange: (value2) => {
                             setFilters((filters2) => {
                               const newFilters = __spreadProps(__spreadValues({}, filters2), {
@@ -4397,7 +4467,7 @@ var ObjectField = ({
     if (typeof value !== "undefined") return value;
     const { selectedItem } = appStoreApi.getState();
     const props = (_a = name ? selectedItem == null ? void 0 : selectedItem.props : {}) != null ? _a : {};
-    return name ? getDeep(props, name) : [];
+    return name ? getDeep(props, name) : {};
   }, [appStoreApi, name, value]);
   if (field.type !== "object" || !field.objectFields) {
     return null;
@@ -4421,11 +4491,10 @@ var ObjectField = ({
             localName,
             field: subField,
             forceReadOnly: !canEdit,
+            value,
             onChange: (subValue, ui, subName2) => {
               const value2 = getValue();
-              if (value2 && name) {
-                onChange(__spreadProps(__spreadValues({}, value2), { [subName2]: subValue }), ui);
-              }
+              onChange(__spreadProps(__spreadValues({}, value2), { [subName2]: subValue }), ui);
             }
           },
           subPath
@@ -4506,18 +4575,13 @@ var defaultFields = {
   text: DefaultField,
   number: DefaultField
 };
-function AutoFieldInternal(_a) {
-  var _b = _a, {
-    provideValue
-  } = _b, props = __objRest(_b, [
-    "provideValue"
-  ]);
-  var _a2;
+function AutoFieldInternal(props) {
+  var _a;
   const dispatch = useAppStore((s) => s.dispatch);
   const overrides = useAppStore((s) => s.overrides);
   const readOnly = useAppStore((0, import_shallow.useShallow)((s) => {
-    var _a3;
-    return (_a3 = s.selectedItem) == null ? void 0 : _a3.readOnly;
+    var _a2;
+    return (_a2 = s.selectedItem) == null ? void 0 : _a2.readOnly;
   }));
   const nestedFieldContext = (0, import_react22.useContext)(NestedFieldContext);
   const { id, Label: Label2 = FieldLabelInternal } = props;
@@ -4528,10 +4592,10 @@ function AutoFieldInternal(_a) {
   const resolvedId = id || defaultId;
   const render = (0, import_react22.useMemo)(
     () => {
-      var _a3, _b2, _c, _d, _e, _f, _g, _h;
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
       return __spreadProps(__spreadValues({}, overrides.fieldTypes), {
-        array: ((_a3 = overrides.fieldTypes) == null ? void 0 : _a3.array) || defaultFields.array,
-        external: ((_b2 = overrides.fieldTypes) == null ? void 0 : _b2.external) || defaultFields.external,
+        array: ((_a2 = overrides.fieldTypes) == null ? void 0 : _a2.array) || defaultFields.array,
+        external: ((_b = overrides.fieldTypes) == null ? void 0 : _b.external) || defaultFields.external,
         object: ((_c = overrides.fieldTypes) == null ? void 0 : _c.object) || defaultFields.object,
         select: ((_d = overrides.fieldTypes) == null ? void 0 : _d.select) || defaultFields.select,
         textarea: ((_e = overrides.fieldTypes) == null ? void 0 : _e.textarea) || defaultFields.textarea,
@@ -4607,9 +4671,7 @@ function AutoFieldInternal(_a) {
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
-        localName: (_a2 = nestedFieldContext.localName) != null ? _a2 : mergedProps.name,
-        value: provideValue && mergedProps.name ? { [mergedProps.name]: mergedProps.value } : void 0
-        // Optionally provide value if this is used outside of app fields (i.e. external field filters)
+        localName: (_a = nestedFieldContext.localName) != null ? _a : mergedProps.name
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
@@ -4688,13 +4750,7 @@ function AutoField(props) {
   if (props.field.type === "slot") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    AutoFieldInternal,
-    __spreadProps(__spreadValues({}, props), {
-      Label: DefaultLabel,
-      provideValue: true
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AutoFieldInternal, __spreadProps(__spreadValues({}, props), { Label: DefaultLabel }));
 }
 
 // components/Drawer/index.tsx
@@ -5806,7 +5862,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_ilw2a_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -5888,7 +5944,11 @@ var InlineTextFieldInternal = ({
         const index = (_a2 = appStore2.state.indexes.zones[zoneCompound]) == null ? void 0 : _a2.contentIds.indexOf(
           componentId
         );
-        const newProps = setDeep(node.data.props, propPath, e.target.innerText);
+        let value2 = e.target.innerText;
+        if (disableLineBreaks) {
+          value2 = value2.replaceAll(/\n/gm, "");
+        }
+        const newProps = setDeep(node.data.props, propPath, value2);
         const resolvedData = yield appStore2.resolveComponentData(
           __spreadProps(__spreadValues({}, node.data), { props: newProps }),
           "replace"
@@ -5907,7 +5967,7 @@ var InlineTextFieldInternal = ({
         cleanupPortal == null ? void 0 : cleanupPortal();
       };
     }
-  }, [appStoreApi, ref.current, value]);
+  }, [appStoreApi, ref.current, value, disableLineBreaks]);
   const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -7292,7 +7352,7 @@ Drawer.Item = DrawerItem;
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // components/Puck/components/Fields/index.tsx
 init_react_import();
@@ -7525,7 +7585,13 @@ var useComponentList = () => {
       let _componentList;
       _componentList = Object.entries(uiComponentList).map(
         ([categoryKey, category]) => {
-          if (category.visible === false || !category.components) {
+          if (!category.components) {
+            return null;
+          }
+          category.components.forEach((componentName) => {
+            matchedComponents.push(componentName);
+          });
+          if (category.visible === false) {
             return null;
           }
           return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -7535,7 +7601,6 @@ var useComponentList = () => {
               title: category.title || categoryKey,
               children: category.components.map((componentName, i) => {
                 var _a2;
-                matchedComponents.push(componentName);
                 const componentConf = config.components[componentName] || {};
                 return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   ComponentList.Item,
@@ -8414,11 +8479,11 @@ function useGetPuck() {
 }
 
 // components/Puck/index.tsx
-var import_fast_deep_equal4 = __toESM(require("fast-deep-equal"));
+var import_fast_deep_equal2 = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Layout/index.tsx
 init_react_import();
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
@@ -8902,88 +8967,98 @@ var ViewportControls = ({
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
   const [isExpanded, setIsExpanded] = (0, import_react56.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName30({ isExpanded, fullScreen }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName30("actionsInner"), children: [
-      viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        ActionButton,
-        {
-          title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
-          onClick: () => {
-            setActiveViewport(viewport.width);
-            onViewportChange(viewport);
-          },
-          isActive: activeViewport === viewport.width,
-          children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
-        },
-        i
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("divider") }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        ActionButton,
-        {
-          title: "Zoom viewport out",
-          disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
-          onClick: (e) => {
-            e.stopPropagation();
-            onZoom(
-              zoomOptions[Math.max(
-                zoomOptions.findIndex((option) => option.value === zoom) - 1,
-                0
-              )].value
-            );
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ZoomOut, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        ActionButton,
-        {
-          title: "Zoom viewport in",
-          disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
-          onClick: (e) => {
-            e.stopPropagation();
-            onZoom(
-              zoomOptions[Math.min(
-                zoomOptions.findIndex((option) => option.value === zoom) + 1,
-                zoomOptions.length - 1
-              )].value
-            );
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ZoomIn, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName30("zoom"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("divider") }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          "select",
-          {
-            className: getClassName30("zoomSelect"),
-            value: zoom.toString(),
-            onChange: (e) => {
-              onZoom(parseFloat(e.currentTarget.value));
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      className: getClassName30({ isExpanded, fullScreen }),
+      suppressHydrationWarning: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName30("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ActionButton,
+            {
+              title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
+              onClick: () => {
+                setActiveViewport(viewport.width);
+                onViewportChange(viewport);
+              },
+              isActive: activeViewport === viewport.width,
+              children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
             },
-            children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-              "option",
-              {
-                value: option.value,
-                label: option.label
+            i
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("divider") }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ActionButton,
+            {
+              title: "Zoom viewport out",
+              disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
+              onClick: (e) => {
+                e.stopPropagation();
+                onZoom(
+                  zoomOptions[Math.max(
+                    zoomOptions.findIndex((option) => option.value === zoom) - 1,
+                    0
+                  )].value
+                );
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ZoomOut, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ActionButton,
+            {
+              title: "Zoom viewport in",
+              disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
+              onClick: (e) => {
+                e.stopPropagation();
+                onZoom(
+                  zoomOptions[Math.min(
+                    zoomOptions.findIndex((option) => option.value === zoom) + 1,
+                    zoomOptions.length - 1
+                  )].value
+                );
               },
-              option.label
-            ))
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ZoomIn, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: getClassName30("zoom"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getClassName30("divider") }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              "select",
+              {
+                className: getClassName30("zoomSelect"),
+                value: zoom.toString(),
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+                onChange: (e) => {
+                  onZoom(parseFloat(e.currentTarget.value));
+                },
+                children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  "option",
+                  {
+                    value: option.value,
+                    label: option.label
+                  },
+                  option.label
+                ))
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "button",
+          {
+            className: getClassName30("toggleButton"),
+            title: "Toggle viewport menu",
+            onClick: () => setIsExpanded((s) => !s),
+            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Monitor, { size: 16 })
           }
         )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "button",
-      {
-        className: getClassName30("toggleButton"),
-        title: "Toggle viewport menu",
-        onClick: () => setIsExpanded((s) => !s),
-        children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Monitor, { size: 16 })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
@@ -9153,8 +9228,7 @@ var Canvas = () => {
                 zoom: zoomConfig.zoom
               });
               const newUi = {
-                viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport }),
-                itemSelector: null
+                viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
               };
               setUi(newUi);
               if (ZOOM_ON_CHANGE) {
@@ -9396,6 +9470,67 @@ var Sidebar = ({
   ] });
 };
 
+// lib/use-delete-hotkeys.ts
+init_react_import();
+var import_react61 = 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_react61.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);
+};
+
 // components/Puck/components/Nav/index.tsx
 init_react_import();
 
@@ -9507,7 +9642,7 @@ var Layout = ({ children }) => {
     plugins,
     height = "100dvh"
   } = usePropsContext();
-  const iframe = (0, import_react61.useMemo)(
+  const iframe = (0, import_react62.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -9533,7 +9668,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -9557,17 +9692,17 @@ var Layout = ({ children }) => {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = (0, import_react61.useMemo)(
+  const CustomPuck = (0, import_react62.useMemo)(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react61.useState)(false);
-  (0, import_react61.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react62.useState)(false);
+  (0, import_react62.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -9576,6 +9711,7 @@ var Layout = ({ children }) => {
     }
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
+  useDeleteHotkeys();
   const layoutOptions = {};
   if (leftWidth) {
     layoutOptions["--puck-user-left-side-bar-width"] = `${leftWidth}px`;
@@ -9589,8 +9725,8 @@ var Layout = ({ children }) => {
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react61.useState)("toggle");
-  const pluginItems = (0, import_react61.useMemo)(() => {
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react62.useState)("toggle");
+  const pluginItems = (0, import_react62.useMemo)(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
     const combinedPlugins = [
@@ -9635,7 +9771,7 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
@@ -9738,11 +9874,11 @@ var Layout = ({ children }) => {
 
 // components/Puck/index.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var propsContext = (0, import_react62.createContext)({});
+var propsContext = (0, import_react63.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react62.useContext)(propsContext);
+var usePropsContext = () => (0, import_react63.useContext)(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -9759,14 +9895,14 @@ function PuckProvider({ children }) {
     onAction,
     fieldTransforms
   } = usePropsContext();
-  const iframe = (0, import_react62.useMemo)(
+  const iframe = (0, import_react63.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react62.useState)(() => {
+  const [generatedAppState] = (0, import_react63.useState)(() => {
     var _a, _b, _c, _d, _e, _f, _g;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -9836,7 +9972,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react62.useState)(
+  const [blendedHistories] = (0, import_react63.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -9856,7 +9992,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react62.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react63.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -9865,7 +10001,7 @@ function PuckProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react62.useCallback)(
+  const generateAppStore = (0, import_react63.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -9893,15 +10029,15 @@ function PuckProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react62.useState)(
+  const [appStore] = (0, import_react63.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
@@ -9910,13 +10046,13 @@ function PuckProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
+  const previousData = (0, import_react63.useRef)(null);
+  (0, import_react63.useEffect)(() => {
     appStore.subscribe(
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if ((0, import_fast_deep_equal4.default)(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal2.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
@@ -9925,7 +10061,7 @@ function PuckProvider({ children }) {
   }, []);
   useRegisterPermissionsSlice(appStore, permissions);
   const uPuckStore = useRegisterUsePuckStore(appStore);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     resolveAndCommitData();
   }, []);