@measured/puck 0.21.0-canary.6dae6cb7 → 0.21.0-canary.9c2c8fe9

package/dist/{chunk-NBNCSA43.mjs → chunk-KNAV6QTS.mjs}

@@ -24,7 +24,7 @@ import {
   walkAppState,
   walkField,
   walkTree
-} from "./chunk-OOLYDXKW.mjs";
+} from "./chunk-X7YZ3YE7.mjs";
 
 // ../../node_modules/classnames/index.js
 var require_classnames = __commonJS({
@@ -88,6 +88,42 @@ var require_classnames = __commonJS({
   }
 });
 
+// ../../node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../node_modules/fast-deep-equal/index.js"(exports, module) {
+    "use strict";
+    init_react_import();
+    module.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
+
 // types/API/Overrides.ts
 init_react_import();
 var overrideKeys = [
@@ -768,7 +804,9 @@ var keyCodeMap = {
   KeyW: "w",
   KeyX: "x",
   KeyY: "y",
-  KeyZ: "z"
+  KeyZ: "z",
+  Delete: "delete",
+  Backspace: "backspace"
 };
 var useHotkeyStore = create()(
   subscribeWithSelector((set) => ({
@@ -792,8 +830,10 @@ var monitorHotkeys = (doc) => {
           ([key2, value]) => value === !!combo[key2]
         );
         if (conditionMet) {
-          e.preventDefault();
-          cb();
+          const handled = cb(e);
+          if (handled !== false) {
+            e.preventDefault();
+          }
         }
       });
       if (key !== "meta" && key !== "ctrl" && key !== "shift") {
@@ -816,6 +856,10 @@ var monitorHotkeys = (doc) => {
       useHotkeyStore.getState().reset();
     }
   };
+  const onBlur = () => {
+    useHotkeyStore.getState().reset();
+  };
+  window.addEventListener("blur", onBlur);
   doc.addEventListener("keydown", onKeyDown);
   doc.addEventListener("keyup", onKeyUp);
   doc.addEventListener("visibilitychange", onVisibilityChanged);
@@ -823,6 +867,7 @@ var monitorHotkeys = (doc) => {
     doc.removeEventListener("keydown", onKeyDown);
     doc.removeEventListener("keyup", onKeyUp);
     doc.removeEventListener("visibilitychange", onVisibilityChanged);
+    window.removeEventListener("blur", onBlur);
   };
 };
 var useMonitorHotkeys = () => {
@@ -1017,7 +1062,7 @@ var flattenData = (state, config) => {
     (content) => content,
     (item) => {
       data.push(item);
-      return null;
+      return item;
     }
   );
   return data;
@@ -5661,7 +5706,7 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "InlineTextField": "_InlineTextField_1xph6_1" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // lib/data/set-deep.ts
 init_react_import();
@@ -6421,7 +6466,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,
@@ -7981,12 +8026,73 @@ var usePreviewModeHotkeys = () => {
   useHotkey({ ctrl: true, i: true }, toggleInteractive);
 };
 
+// lib/use-delete-hotkeys.ts
+init_react_import();
+import { useCallback as useCallback17 } from "react";
+var isElementVisible = (element) => {
+  let current = element;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("hidden")) {
+      return false;
+    }
+    current = current.parentElement;
+  }
+  return true;
+};
+var shouldBlockDeleteHotkey = (e) => {
+  var _a;
+  if (e == null ? void 0 : e.defaultPrevented) return true;
+  const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
+  if (origin instanceof HTMLElement) {
+    const tag = origin.tagName.toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") return true;
+    if (origin.isContentEditable) return true;
+    const role = origin.getAttribute("role");
+    if (role === "textbox" || role === "combobox" || role === "searchbox" || role === "listbox" || role === "grid") {
+      return true;
+    }
+  }
+  const modal = document.querySelector(
+    'dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]'
+  );
+  if (modal && isElementVisible(modal)) {
+    return true;
+  }
+  return false;
+};
+var useDeleteHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const deleteSelectedComponent = useCallback17(
+    (e) => {
+      var _a;
+      if (shouldBlockDeleteHotkey(e)) {
+        return false;
+      }
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return true;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ delete: true }, deleteSelectedComponent);
+  useHotkey({ backspace: true }, deleteSelectedComponent);
+};
+
 // components/Puck/index.tsx
-import fdeq from "fast-deep-equal";
+var import_fast_deep_equal = __toESM(require_fast_deep_equal());
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo4, useCallback as useCallback17, useMemo as useMemo19, useState as useState23 } from "react";
+import { memo as memo4, useCallback as useCallback18, useMemo as useMemo19, useState as useState23 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
@@ -8113,7 +8219,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;
@@ -8223,7 +8329,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();
@@ -8244,7 +8350,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;
@@ -8255,7 +8361,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback18(() => {
+  const handleMouseUp = useCallback19(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8271,7 +8377,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback18(
+  const handleMouseDown = useCallback19(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8331,7 +8437,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);
@@ -8368,7 +8474,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback20(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8539,7 +8645,7 @@ function PuckProvider({ children }) {
     );
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
-  const generateAppStore = useCallback20(
+  const generateAppStore = useCallback21(
     (state) => {
       return {
         state,
@@ -8588,7 +8694,7 @@ function PuckProvider({ children }) {
       (s) => s.state.data,
       (data) => {
         if (onChange) {
-          if (fdeq(data, previousData.current)) return;
+          if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
           onChange(data);
           previousData.current = data;
         }
@@ -8668,6 +8774,7 @@ function PuckLayout({ children }) {
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
+  useDeleteHotkeys();
   useEffect29(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();

package/dist/{chunk-OOLYDXKW.mjs → chunk-X7YZ3YE7.mjs}

@@ -681,19 +681,19 @@ init_react_import();
 
 // lib/get-changed.ts
 init_react_import();
-import fdeq from "fast-deep-equal";
+import { deepEqual } from "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]: !fdeq(oldItemProps[item], newItemProps[item])
+      [item]: !deepEqual(oldItemProps[item], newItemProps[item])
     });
   }, {}) : {};
 };
 
 // lib/resolve-component-data.ts
-import fdeq2 from "fast-deep-equal";
+import { deepEqual as deepEqual2 } from "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;
@@ -702,7 +702,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   const id = "id" in item.props ? item.props.id : "root";
   if (shouldRunResolver) {
     const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
-    if (trigger !== "force" && item && fdeq2(item, oldItem)) {
+    if (trigger !== "force" && item && deepEqual2(item, oldItem)) {
       return { node: resolved, didChange: false };
     }
     const changed = getChanged(item, oldItem);
@@ -752,7 +752,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
   };
   return {
     node: itemWithResolvedChildren,
-    didChange: !fdeq2(item, itemWithResolvedChildren)
+    didChange: !deepEqual2(item, itemWithResolvedChildren)
   };
 });
 

package/dist/index.css

@@ -1331,16 +1331,17 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
-._InlineTextField_1xph6_1 {
+._InlineTextField_104qp_1 {
   cursor: text;
   display: inline-block;
   white-space: pre-wrap;
+  text-decoration: inherit;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1 {
+[data-dnd-dragging] ._InlineTextField_104qp_1 {
   cursor: none;
   caret-color: transparent;
 }
-[data-dnd-dragging] ._InlineTextField_1xph6_1::selection {
+[data-dnd-dragging] ._InlineTextField_104qp_1::selection {
   display: none;
 }